Question

在Babel docs中，他们只是说要包含import "babel-polyfill";以便我可以使用ES6生成器，但在我的gulpfile.js中包含该行后，我仍然会产生异常：Uncaught ReferenceError: regeneratorRuntime is not defined 这是我的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而不是某种模块捆绑器（例如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

Answer 2

将您需要的填充物包含在应用程序入口点的顶部。

import 'babel/polyfill'需要放在jsSrc条目文件的顶部

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

2 个答案: