如何在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條目文件的頂部