javascript - Babel polyfill 和 gulp

Question

我无法使用 gulp 正确加载 babel/polyfill。在我的例子中，Array.from 方法是未定义的。 但是，如果尝试使用 gulp .add(require.resolve("babel/polyfill")) 加载 browser-polyfill.js，我会得到一个错误 "only one允许使用 babel/polyfill 实例”。 源代码是正确的，因为我已经用 babel browser-polyfill.js 测试了它。

源代码:

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

gulp 文件:

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 首先运行。这意味着 polyfill 将在您的应用程序加载后加载。要么做

require('babel/polyfill');

在你的 entryPoint 文件中，或者按正确的顺序放置它们

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