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

在巴别塔，他们只是说，包括

导入“巴别塔polyfill”

这样我就可以使用ES6生成器了，但是在我的gulpfile.js中包含了这一行之后，我仍然生成了一个异常：

未捕获引用错误：未定义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;
}

我不知道怎么用这个。。你能帮我吗

要包含polyfill，您需要将其放在应用程序入口点的顶部

导入“babel/polyfill”

需要放在jsSrc输入文件的顶部

，因为您只是在使用gulp，而不是某种模块绑定器（例如，Web包）

你应该遵循这个指南

然后像这样使用它

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

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

应该这样做：）

编辑：

似乎babel插件转换运行时需要向转换文件添加调用，所以我猜您需要使用模块加载器。我建议使用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']
                }
            }
        ]
    }
};

使用上面的配置，文件结构应该如下所示

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

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

---

然后从命令行运行

webpack

。如果你想让缩小版运行

webpack-p

，你需要将它导入到实际的Main.js中，因为那是它被使用的地方。是的，Chrome支持生成器。但我不想将生成器分离到其他文件中。只需按照您在问题中提到的巴别塔中的“浏览器中的用法”部分进行操作。它解决了

生成

异常，但现在我得到了

未捕获的引用错误：未定义require

。下面是导致chrome devtools控制台出现问题的一行代码：

var\u registrator=require（“babel运行时/再生器”）这太糟糕了：（Babel似乎在transformer代码中包含requires，因此您似乎需要使用某种模块绑定器。我建议使用webpack。是的，我会查看它，谢谢。无论如何，我是否应该关闭我的问题？我认为
Babel polyfill
是用于gulp，但它不是..是的，您可以关闭它：）我将导入放在顶部，我认为巴贝尔将其转换为
require（“巴贝尔/polyfill”）.
然后我得到了
未捕获的引用错误：require未定义
为了使用polyfill与
require
或
导入
您必须设置一个模块加载器。两个流行的选择是
网页
和
浏览
。请查看浏览器部分中的用法：。抱歉，我忘了提及。B中的用法rowser部分仅在您想要放弃模块加载器（又名bundler）时使用在您的构建过程中。正确。这是指在实际代码库中使用。但是，如果您尝试在gulpfile中使用ES2015，则有不同的方法。但是，如果您遵循webpack+babel6教程，我认为您会找到您要找的内容。然后，您可以包括使用生成器函数的方法。下面是一个这样的教程al:.它甚至包括了
babel polyfill
。