Jak korzystać Babel PolyFill w gulpfile.js

Question

W Babel docs po prostu powiedzieć, że obejmuje import "babel-polyfill"; tak, że można używać generatorów ES6 ale po tej linii zawarte w moich gulpfile.js Wciąż gen wyjątek: Uncaught ReferenceError: regeneratorRuntime is not defined ten jest moje 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 mieć maines6.js i inne .js plików. W maines6.js tutaj jest mój generator:

function* anotherGenerator(i) { 
    yield i + 1; 
    yield i + 2; 
    yield i + 3; 
} 

Nie wiem jak tego użyć .. możesz mi pomóc?

Answer 1

to include the polyfill you need to require it at the top of the entry point to your application.

import 'babel/polyfill' musiałby iść na górze pliku wejściowego jsSrc

Answer 2

Skoro jesteś po prostu używając łyk, a nie jakiś moduł Bundler (WebPACK dla EG)

Powinieneś po tej instrukcji https://github.com/babel/gulp-babel#runtime

npm install --save-dev babel-plugin-transform-runtime 

a następnie używać go tak jak to

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

powinno wystarczyć :)

EDIT:

Wydaje się, że Babel-plugin-transform-runtime dodaj wymaga połączenia do przekształconej pliku, więc myślę, że trzeba użyj modułu ładującego. Proponuję pakiet webowy, chociaż istnieją alternatywy takie jak browserify i jspm.

Musisz

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

Następnie trzeba utworzyć plik webpack.config.js. Oto bardzo prymitywna konfiguracja.

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'] 
       } 
      } 
     ] 
    } 
}; 

Z config powyższej struktury plików powinny looke tak

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

Następnie wystarczy uruchomić webpack z linii poleceń. Jeśli chcesz uzyskać wersję zminimalizowaną, uruchom webpack -p