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

在巴贝尔文件中，他们只是说包括import "babel-polyfill"; 所以，我可以使用ES6生成器，但是，当我包括在我的gulpfile.js行后，我仍然产生一个exception： 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添加需要调用转换的文件，所以我想你将需要使用模块加载器。 我会build议webpack，虽然有像browserify和jspm的替代。

你需要

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

然后你需要创build一个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'] } } ] } }; 

上面的configuration文件结构应该像这样look

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

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

Answer 2

包括你需要在你的应用程序的入口点顶部的polyfill。

import 'babel/polyfill'将需要在jsSrc入口文件的顶部