Browserify 和 ES6/ES2015 类（babel 编译器）

Question

我在单独的文件中有 2 个类（ES2015 类样式）和一个带有 require 的 App 文件。我想在浏览器中使用这个 CommonJS 模块。最流行的库是 Browserify，带有用于 ES2015 语法的 Babel 编译器 (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

如何使用 sourcemap 支持为源 js 文件删除此重复代码？

我试过在没有 Babelify 转换的情况下将所有 js 文件浏览器化，然后用 Babel 编译结果。它可以在没有重复代码的情况下工作，但 sourcemap 将不正确。

Answer 1

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

"plugins": ["transform-runtime"]

在您的 .babelrc 和 "presets": ["es2015"] 配置中。

确切的答案取决于您希望 polyfill 函数如何工作。 Babel 提供 babel-polyfill 作为一种全局加载 polyfill 的方法，该 polyfill 将在整个应用程序中添加 ES6 库函数。然而，这可能与上面 transform-runtime 的默认行为冲突，后者将尝试将对全局变量的引用指向 babel-runtime 模块。这意味着您可能会意外地加载相同的 polyfilled API 的两个副本。

如果你want/need使用babel-polyfill，因为它在全球范围内提供了大量的标准 ES6 功能，包括像 Array.prototype.includes 这样的全局原型方法，那么你应该添加额外的插件的参数：
```
"plugins": [
  ["transform-runtime", {polyfill: false, regenerator: false}],
]
```
如果您不想使用 babel-polyfill 之类的 globally-polluting polyfill，您可以改用 babel-runtime 中的 polyfilling 逻辑。这可能很重要，例如，如果您正在编写一个独立的库并且不想让所有用户为您加载 babel-polyfill，或者从库中更改全局变量，这是一个坏主意。
```
"plugins": [
  "transform-runtime",
]
```

Browserify 和 ES6/ES2015 类（babel 编译器）

Browserify and ES6/ES2015 classes (babel compiler)

javascript

commonjs

browserify

ecmascript-6

babeljs