javascript - 如何在 gulpfile.js 中使用 babel-polyfill

Question

在 Babel 中 docs他们只是说要包含 import "babel-polyfill"; 以便我可以使用 ES6 生成器，但是在我将该行包含在我的 gulpfile.js 中之后，我仍然会生成一个异常:Uncaught ReferenceError: regeneratorRuntime 未定义 这是我的 gulpfile.js

import 'babel-polyfill';

var gulp = require("gulp"),
babel = require("gulp-babel"),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');

gulp.task("babel", function() {
return gulp.src(jsSrc)
    .pipe(concat('Main.js'))
    .pipe(babel())
    .pipe(gulp.dest(jsDest))
    .pipe(rename('Main-min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsDest));
});

jsSrc 有 maines6.js 和其他 .js 文件。在 maines6.js 中，这是我的生成器:

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

我不知道怎么用..你能帮我吗？

Answer 1

因为您只是使用 gulp 而不是某种模块 bundler (例如 webpack)

您应该遵循本指南 https://github.com/babel/gulp-babel#runtime

npm install --save-dev babel-plugin-transform-runtime

然后像这样使用它

.pipe(babel({
        plugins: ['transform-runtime']
    }))

应该可以解决这个问题 :)

编辑:

似乎 babel-plugin-transform-runtime add 需要调用转换后的文件，所以我猜你需要使用模块加载器。我建议使用 webpack，尽管还有其他选择，例如 browserify 和 jspm。

你需要

npm install -g webpack
npm install babel-loader babel-core babel-polyfill babel-preset-es2015 --save-dev

然后您需要创建一个 webpack.config.js 文件。这是一个非常原始的设置。

module.exports = {
    context: __dirname + '/app',
    entry: ['babel-polyfill', './entries/index.js'],
    output: {
        path: 'dist',
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.js/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

有了上面的配置文件结构应该是这样的

project/
    node_modules/
    app/
        entries/
            main.js
    dist/
        main.js
    webpack.config.js
    package.json

然后只需从命令行运行 webpack。如果你想获得缩小版本运行 webpack -p