[英]Browserify and ES6/ES2015 classes (babel compiler)
我在單獨的文件中有2個類(ES2015類樣式),在一個文件中有require。 我想在瀏覽器中使用此CommonJS模塊。 最受歡迎的庫是帶有ES2015語法的Babel編譯器的Browserify(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
,然后包括
"plugins": ["transform-runtime"]
.babelrc
的"presets": ["es2015"]
旁邊"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", ]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.