Browserify和ES6 / ES2015类(babel编译器)

时间:2016-01-27 05:26:09

标签: javascript ecmascript-6 browserify babeljs commonjs

我在单独的文件中有两个类(ES2015类样式)和一个带有require的App文件。我想在浏览器中使用这个CommonJS模块。最流行的lib是使用Babel编译器的Browserify for 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文件删除此重复代码 with sourcemap support

我在没有Babelify变换的情况下尝试了浏览所有js文件,然后使用Babel编译结果。它没有重复的代码,但源图不正确。

1 个答案:

答案 0 :(得分:2)

简单的答案是你应该npm install babel-plugin-transform-runtime babel-runtime然后包括

"plugins": ["transform-runtime"]
<{1>}旁边的.babelrc配置

确切的答案取决于您希望polyfill功能如何工作。 Babel提供"presets": ["es2015"]作为全局加载polyfill的方法,该填充将在整个应用程序中添加ES6库函数。但是,这可能与上面的babel-polyfill的默认行为冲突,而后者将尝试将对全局变量的引用指向transform-runtime模块。这意味着您可能不小心最终加载了两个相同的polyfilled API的副本。

  1. 如果您希望/需要使用babel-runtime,因为它全局提供了大量标准ES6功能,包括babel-polyfill等全局原型方法,那么您应该在插件中添加其他参数:< / p>

    Array.prototype.includes
  2. 如果您不想使用像"plugins": [ ["transform-runtime", {polyfill: false, regenerator: false}], ] 这样全局污染的polyfill,则可以使用babel-polyfill中的填充逻辑。这可能很重要,例如,如果您正在编写独立库,并且不希望让所有用户为您加载babel-runtime,或者从库中更改全局变量,这是一个坏主意。

    babel-polyfill