बेबेल पॉलीफिल और गल्प

Question

मैं सही ढंग से babel/polyfill को गल्प के साथ लोड नहीं कर सकता। मेरे मामले में Array.from विधि अपरिभाषित है। हालांकि अगर browser-polyfill.js को gulp .add(require.resolve("babel/polyfill")) के साथ लोड करने का प्रयास करें तो मुझे "only one instance of babel/polyfill is allowed" त्रुटि मिलती है। स्रोत कोड सही है क्योंकि मैंने इसका परीक्षणके साथ किया है।

स्रोत कोड:

//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 पहले से चल रहा है के साथ, दो प्रवेश द्वारों के साथ एक बंडल पैदा करेगा। इसका मतलब है कि पॉलीफिल के बाद लोड हो जाएगा, आपका आवेदन लोड हो गया है। या तो

require('babel/polyfill'); 

कर अपने entryPoint फाइल के अंदर, या सही क्रम

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