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

Question

在Babel 文档中，他们只是说要包括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

包括polyfill，您需要在应用程序入口点的顶部要求它。

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