在使用gulp时,我无法正确加载babel/polyfill
库。在我的情况下,Array.from
方法未定义。
然而,如果我尝试使用browser-polyfill.js
来代替,使用 .add(require.resolve("babel/polyfill"))
我会得到一个错误信息"only one instance of babel/polyfill is allowed"
。
源代码是正确的,因为我已经使用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
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']);
.add()
方法会使 polyfill 在入口点之后加载。建议尝试browserify([require.resolve("babel/polyfill"), entryPoint]
替代browserify(entryPoint)
- loganfsmyth