Babel polyfill and gulp

Question

Non riesco a caricare correttamente babel/polyfill con gulp. Nel mio caso il metodo Array.from non è definito. Tuttavia se provate a caricare browser-polyfill.js con il gulp .add(require.resolve("babel/polyfill")), ricevo un errore "only one instance of babel/polyfill is allowed". Il codice sorgente è corretto perché l'ho testato con babel browser-polyfill.js.

Codice sorgente:

//Lib.js 
export default class Lib 
{ 
    constructor() 
    { 
    var src = [1, 2, 3]; 
    this.dst = Array.from(src); 
    } 
    foo() 
    { 
    return this.dst; 
    } 
} 

//main.js 
import Lib from "./Lib"; 

var l = new Lib(); 
console.log(l.foo()); //Uncaught TypeError: Array.from is not a function 

Gulpfile:

var gulp  = require('gulp'); 
var sourcemaps = require('gulp-sourcemaps'); 
var source  = require('vinyl-source-stream'); 
var buffer  = require('vinyl-buffer'); 
var browserify = require('browserify'); 
var watchify = require('watchify'); 
var babelify = require('babelify'); 
var uglify  = require('gulp-uglify'); 

var entryPoint = "./js/main.js"; 


function compile(watch) 
{ 
    var bundler; 

    function debug() 
    { 
    bundler.bundle() 
    .on('error', function(err) { console.error(err); this.emit('end'); }) 
    .pipe(source('main.debug.js')) 
    .pipe(buffer()) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
    .pipe(sourcemaps.write('./')) 
    .pipe(gulp.dest('./bin')); 
    } 

    function release() 
    { 
    bundler.bundle() 
    .on('error', function(err) { console.error(err); this.emit('end'); }) 
    .pipe(source('main.release.js')) 
    .pipe(buffer()) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./bin')); 
    } 

    if(watch) 
    { 
    bundler = watchify(browserify(entryPoint, { debug: watch }) 
         .add(require.resolve("babel/polyfill")) 
         .transform(babelify)); 

    bundler.on('update', function() 
    { 
     console.log('Sources has changed. Rebuilding...'); 
     debug(); 
    }); 

    debug(); 
    } 
    else 
    { 
    bundler = browserify(entryPoint, { debug: watch }) 
       .add(require.resolve("babel/polyfill")) 
       .transform(babelify); 
    release(); 
    } 
} 


gulp.task('release', function() { return compile(false); }); 
gulp.task('debug', function() { return compile(true); }); 

gulp.task('default', ['debug']); 

Answer 1

browserify(entryPoint, { debug: watch }) 
      .add("babel/polyfill") 

creerà un bundle con due punti di ingresso, con entryPoint in esecuzione prima. Ciò significa che il polyfill caricherà dopo il che l'applicazione ha caricato. O fare

require('babel/polyfill'); 

dentro il file entryPoint, o metterli nel giusto ordine

browserify(["babel/polyfill", entryPoint], { debug: watch })