Babel polyfill 和 gulp
Babel polyfill and gulp
我无法用 gulp 正确加载 babel/polyfill
。在我的例子中 Array.from
方法是未定义的。
但是,如果尝试用 gulp .add(require.resolve("babel/polyfill"))
加载 browser-polyfill.js
,我会得到一个错误 "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']);
browserify(entryPoint, { debug: watch })
.add("babel/polyfill")
将创建一个包含两个入口点的包,首先是 entryPoint
运行。这意味着 polyfill 将在您的应用程序加载 之后 加载。要么
require('babel/polyfill');
在您的 entryPoint
文件中,或者按正确的顺序排列它们
browserify(["babel/polyfill", entryPoint], { debug: watch })
我无法用 gulp 正确加载 babel/polyfill
。在我的例子中 Array.from
方法是未定义的。
但是,如果尝试用 gulp .add(require.resolve("babel/polyfill"))
加载 browser-polyfill.js
,我会得到一个错误 "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']);
browserify(entryPoint, { debug: watch })
.add("babel/polyfill")
将创建一个包含两个入口点的包,首先是 entryPoint
运行。这意味着 polyfill 将在您的应用程序加载 之后 加载。要么
require('babel/polyfill');
在您的 entryPoint
文件中,或者按正确的顺序排列它们
browserify(["babel/polyfill", entryPoint], { debug: watch })