Babil polyfill ve gulp

Question

babel/polyfill'u gulp ile doğru şekilde yükleyemiyorum. Benim durumumda Array.from yöntemi tanımlanmamış. Ancak, browser-polyfill.js gulp .add(require.resolve("babel/polyfill")) ile yüklemeye çalışırsanız, "only one instance of babel/polyfill is allowed" numaralı hatayla karşılaşıyorum. Kaynak kodu doğru çünkü babil browser-polyfill.js ile test ettim.

Kaynak kodu:

//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") 

entryPoint ilk çalışan, iki giriş noktaları içeren bir paket yaratacaktır. Bu, polyfill'in uygulamanızın yüklendiği'dan sonra yükleneceği anlamına gelir. Ya entryPoint dosya içindeki

require('babel/polyfill'); 

yapın veya sağ sırayla

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