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

【问题标题】：Browserify and ES6/ES2015 classes (babel compiler)Browserify 和 ES6/ES2015 类（babel 编译器）
【发布时间】：2016-05-03 22:34:08
【问题描述】：

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

如何在源 js 文件的 sourcemap 支持 中删除此重复代码？

我尝试在没有 Babelify 转换的情况下将所有 js 文件合并为一个，然后使用 Babel 编译结果。它可以在没有重复代码的情况下工作，但 sourcemap 会不正确。

【问题讨论】：

您这样做是为了解决什么问题？
我想使用带有 ES2015 语法的 CommonJS 模块系统，在浏览器中进行简单的调试。
在转译之前尝试捆绑。
你在使用任何新的 ES6 原型方法吗？最简单的方法是使用babel-plugin-transform-runtime/babel-runtime 而不是babel-polyfill。
“任何新的 ES6 原型方法”是什么意思？你能写一个例子吗？

标签： javascript ecmascript-6 browserify babeljs commonjs

【解决方案1】：

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

"plugins": ["transform-runtime"]

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

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

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

【讨论】：