Babel es2015 预设不会将 Map 和 Set 转换为 es5

Question

我正在使用 gulp-babel 将我的 es6 代码翻译成 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;
});

虽然它大部分工作正常，但实际上并没有翻译 Map 和 Set。我的结果 js 代码仍然包含它们，当我运行使用 karma/mocha/phantomJs 进行单元测试时，我得到以下错误：

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

有什么办法可以强制babel将Map和Set翻译成es5中的object和array吗？

Answer 1

Babel 不能 "translate" Map 和 Set，因为它们不是语言特性（尽管它们在 ES 规范中有描述）。它们类存在于全局范围内。

您应该使用定义 ES6 集合的 polyfill，这样您就可以在不提供支持的浏览器中继续使用它们。我不确定 Babel 使用的是什么库，但 es6-shim 应该涵盖所有主要部分。

您无需更改任何代码即可使用 polyfill，它只是定义了 Map（和朋友）供以后正常使用。

Answer 2

Babel 不会将 Map 和 Set 转译为 ES5。

而是使用他们的 polyfill:

In order to support Maps, Sets, WeakMaps, and WeakSets in all environments you must include the Babel polyfill.

Source

Answer 3

您必须在代码中包含 babel-polyfill。

你必须使用 npm 安装它：

npm install babel-polyfill

然后，如果您使用的是 ES6 模块：

import 'babel-polyfill';

或：

require('babel-polyfill');

如果你想运行你的代码在浏览器中，你可以从cdnjs加载它：

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

Babel es2015 预设不会将 Map 和 Set 转换为 es5

Babel es2015 presets doesn't translate Map and Set to es5

javascript

phantomjs

ecmascript-6

karma-runner

babeljs