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中的对象和数组？

Answer 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>

Answer 2

Babel不能翻译＆＃34; Map和Set，因为它们不是语言功能（虽然它们在ES规范中有描述）。他们是全球范围内存在的类。

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

您不需要更改代码以使用polyfill，它只是定义Map（和朋友）以供日后使用。

Answer 3

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

相反，请使用他们的polyfill：

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

Source

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

3 个答案: