Browserify和ES6 / ES2015课程(babel compiller)
我有两个类(ES2015类风格)在单独的文件和一个应用程序文件与需求。 我想在浏览器中使用这个CommonJS模块。 最流行的lib是Browserify和Babel compliller的ES2015语法(babelify)。 例:
Class1.js
class Class1 {
constructor() {
this.prop = 1;
}
method() {
console.log(this.prop);
}
}
module.exports = Class1;
Class2.js
class Class2 {
constructor() {
this.prop = 2;
}
method() {
console.log(this.prop);
}
}
module.exports = Class2;
App.js
var Class1 = require('./Class1');
var Class2 = require('./Class2');
class App {
constructor() {
this.class1 = new Class1();
this.class2 = new Class2();
}
}
module.exports = App;
gulpfile.js
gulp.task("js", function () {
browserify({ entries: config.js.appFile, extensions: ['.js'], debug: true })
.transform(babelify)
.bundle()
.pipe(source(config.js.appMinFile))
.pipe(gulp.dest('.'));
});
结果app.js中的问题 它包含每个模块中每个类的重复代码。
var _createClass = function () { ... }
function _classCallCheck(instance, Constructor) { ...}
function _possibleConstructorReturn(self, call) { ... } //not for example above but can exists
function _inherits(subClass, superClass) { ... } //not for example above but can exists
如何删除源代码支持源js文件这个重复的代码?
我试着在没有Babelify变换的情况下Browserify所有js文件,然后用Babel编译结果。 它的工作原理没有重复的代码,但sourcemap将不正确。
简单的答案是你应该npm install babel-plugin-transform-runtime babel-runtime
然后include
"plugins": ["transform-runtime"]
在你的"presets": ["es2015"]
旁边的.babelrc
"presets": ["es2015"]
配置。
确切的答案取决于你希望你的polyfill函数如何工作。 Babel提供了babel-polyfill
作为一种全局加载babel-polyfill
的方法,该填充将在您的应用程序中添加ES6库函数。 然而,这可能会与上面的transform-runtime
的默认行为相冲突,而该行为将尝试将引用全局指向babel-runtime
模块。 这意味着您可能会意外地收到两个相同的填充API填充副本。
如果你想/需要使用babel-polyfill
因为它全局提供了大量的标准ES6功能,包括像Array.prototype.includes
这样的全局原型方法,那么你应该为你的插件添加额外的参数:
"plugins": [
["transform-runtime", {polyfill: false, regenerator: false}],
]
如果你不想使用像babel-polyfill
这样的全球污染babel-polyfill
,你可以在babel-runtime
使用polyfilling逻辑。 如果您正在编写独立库并且不想让所有用户为您加载babel-polyfill
或从库中更改全局变量,这可能很重要,这是一个糟糕的主意。
"plugins": [
"transform-runtime",
]