[英]Browserify and ES6/ES2015 classes (babel compiler)
I have 2 classes (ES2015 Classes style) in separate files and one App file with require. 我在单独的文件中有2个类(ES2015类样式),在一个文件中有require。 I want to use this CommonJS modules in browser.
我想在浏览器中使用此CommonJS模块。 Most popular lib is Browserify with Babel compiler for ES2015 syntax (babelify).
最受欢迎的库是带有ES2015语法的Babel编译器的Browserify(babelify)。 Example:
例:
Class1.js Class1.js
class Class1 {
constructor() {
this.prop = 1;
}
method() {
console.log(this.prop);
}
}
module.exports = Class1;
Class2.js Class2.js
class Class2 {
constructor() {
this.prop = 2;
}
method() {
console.log(this.prop);
}
}
module.exports = Class2;
App.js 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 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('.'));
});
The problem in result app.js. 结果app.js中的问题 。 It contains duplicate code for each classes in each modules.
它包含每个模块中每个类的重复代码。
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
How to remove this duplicate code with sourcemap support for source js files? 如何使用源地图对源js文件的支持来删除此重复代码?
I tried Browserify all js files in one without Babelify transform, then compile result with Babel. 我尝试了在没有Babelify转换的情况下将Browserify合并为所有js文件,然后使用Babel编译结果。 It works without duplicate code but sourcemap will incorrect.
它可以在没有重复代码的情况下工作,但是sourcemap将不正确。
The simple answer is that you should npm install babel-plugin-transform-runtime babel-runtime
and then include 简单的答案是,您应该
npm install babel-plugin-transform-runtime babel-runtime
,然后包括
"plugins": ["transform-runtime"]
in your .babelrc
alongside your "presets": ["es2015"]
configuration. .babelrc
的"presets": ["es2015"]
旁边"presets": ["es2015"]
配置。
The exact answer depends on how you want your polyfill functions to work. 确切的答案取决于您希望Polyfill函数如何工作。 Babel provides
babel-polyfill
as a way to globally load a polyfill that will add ES6 library functions throughout your application. Babel提供
babel-polyfill
作为全局加载babel-polyfill
一种方式,它将在整个应用程序中添加ES6库功能。 However this can conflict with the default behavior of transform-runtime
above, which will instead attempt to point references to globals back at the babel-runtime
module. 但是,这可能与上面的
transform-runtime
的默认行为相冲突,后者的默认行为是尝试将对全局变量的引用指向babel-runtime
模块。 This means you could accidentally end up with two copies of the same polyfilled APIs loaded. 这意味着您可能会意外地加载了两个相同填充API的副本。
If you want/need to use babel-polyfill
because it globally provides tons of standard ES6 functionality, including global prototype methods like Array.prototype.includes
, then you should add additional params to your plugin: 如果您希望/需要使用
babel-polyfill
因为它在全球范围内提供了大量的标准ES6功能,包括诸如Array.prototype.includes
类的全局原型方法,则应在插件中添加其他参数:
"plugins": [ ["transform-runtime", {polyfill: false, regenerator: false}], ]
If you don't want to use a globally-polluting polyfill like babel-polyfill
, you can use the polyfilling logic in babel-runtime
instead. 如果您不想使用像
babel-polyfill
这样的全局污染babel-polyfill
,可以在babel-runtime
使用polyfilling逻辑。 This can be important if for instance you are writing a standalone library and don't want to make all your users load babel-polyfill
for you, or change globals from the library, which is a bad idea. 例如,如果您正在编写一个独立的库并且不想让所有用户为您加载
babel-polyfill
或从该库中更改全局变量,那么这很重要。
"plugins": [ "transform-runtime", ]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.