Babel polyfill and gulp

Question

I can'not correctly load babel/polyfill with gulp. In my case Array.from method is undefined. However if try to load browser-polyfill.js with gulp .add(require.resolve("babel/polyfill")) I get an error "only one instance of babel/polyfill is allowed". Source code is correct because I've tested its with babel browser-polyfill.js.

Source code:

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

will create a bundle with two entry points, with entryPoint running first. That means that the polyfill will load after your application has loaded. Either do

require('babel/polyfill');

inside your entryPoint file, or put them in the right order

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