Presets Babel es2015 do not translate the card and do not install on es5

Question

I am using gulp -babel to translate my es6 code to es5

gulp.task('build_all_debug', ['config', 'compile'], function() { var stream = gulp.src(['public/js/config.js', 'public/js/*.js', 'public/compiled/*.js']) .pipe(babel({ presets: ['es2015'] })) .pipe(concat('app.js')) .pipe(gulp.dest('public/dist')); return stream; }); 

While it basically works fine, it does not actually translate the card and set. My code still has them in my js code, and when I run unit test with karma / mocha / phantomJs, I got the following error:

 PhantomJS 2.1.1 (Mac OS X 0.0.0) notes.controller "before each" hook: workFn for "loads notes from the service" FAILED Can't find variable: Map activate@public /dist/app.js:2402:39 

Is there any way to get babel to translate the map and set the object and array in es5?

Answer 1

You must include babel-polyfill in your code.

You need to install it using npm:

 npm install babel-polyfill 

and then if you are using ES6 modules:

 import 'babel-polyfill'; 

or

 require('babel-polyfill'); 

If you want to run your code in a browser, you can download it from cdnjs:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script> 

Answer 2

Babel cannot "translate" Map and Set because they are not language functions (although they are described in the ES specification). These are classes that exist in a global area.

You must use the polyfill, which defines ES6 collections, so you can continue to use them in browsers that do not support. I'm not sure which library Babel uses, but es6-shim should cover all the main parts.

You will not need to change the code to use polyfill, it just defines Map (and friends) for normal use later.

Answer 3

Babylon does not translate Map and Set into ES5.

Use polyfill instead :

To support maps, kits, WeakMaps and WeakSets in all environments, you must enable Babel polyfill.

A source