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

【问题标题】：Babel es2015 presets doesn't translate Map and Set to es5Babel es2015 预设不会将 Map 和 Set 转换为 es5
【发布时间】：2016-11-02 19:47:39
【问题描述】：

我正在使用 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 在 es5 中将 Map 和 Set 翻译成对象和数组？

【问题讨论】：

如果你通过 Babel 使用 ES6，你真的不应该将你的文件连接在一起。如果你这样做而不是使用模块捆绑器，你会遇到麻烦。
@loganfsmyth，你能建议一下什么模块捆绑器是 babel 的“通常”选择吗？我现在感觉就像在兔子洞里一样，我使用 babel 的唯一原因是因为同样的 Map/Set 问题，我无法将 typescript 直接编译为 es5，为了兼容性，我必须使用 babel，这很容易添加了一个 babel 管道，但现在看来我需要更改整个构建过程？
如今相对正常的工作流程是像 Webpack 或 Browserify 这样的模块打包器。

标签： javascript ecmascript-6 phantomjs karma-runner babeljs

【解决方案1】：

您必须在代码中包含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>

【讨论】：

不幸的是，由于 OP 使用 gulp-concat，它没有模块系统，因此没有简单的方法来做到这一点:(
@loganfsmyth 所以gulp-concat不能使用任何外部模块？
babel-polyfill 是 CommonJS，所以我猜你必须在它上面运行 browserify，然后将它连接到你的包中？
@loganfsmyth 也是available on cdnjs，所以可以使用<script> 标签来包含。
啊，真是的。

【解决方案2】：

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

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

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

【讨论】：

我说得对吗？在这种情况下我应该更喜欢 babel-polyfill 吗？

【解决方案3】：

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

改为使用他们的polyfill：

为了在所有环境中支持 Maps、Sets、WeakMaps 和 WeakSets，您必须包含 Babel polyfill。

Source

【讨论】：