Javascript Browserify和ES6/ES2015类（巴贝尔编译器）

我有两个单独文件中的类（ES2015类样式）和一个带有require的应用程序文件。我想在浏览器中使用这个CommonJS模块。最流行的库是Browserify和Babel编译器的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('.'));
});

result 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将不正确。

简单的答案是，您应该

npm安装babel插件转换运行时babel运行时

，然后包括

"plugins": ["transform-runtime"]

在您的

.babelrc

和

的“预设”中：[“es2015”]

配置

确切答案取决于您希望多边形填充函数如何工作。Babel提供了

Babel polyfill

作为全局加载polyfill的一种方式，该polyfill将在整个应用程序中添加ES6库函数。但是，这可能与上面的

transform runtime

的默认行为冲突，后者将尝试将全局引用指向

babel runtime

模块。这意味着您可能会意外地加载相同的多填充API的两个副本

如果您想/需要使用

babel polyfill

，因为它在全球范围内提供了大量标准ES6功能，包括

Array.prototype.includes

等全球原型方法，那么您应该向插件添加额外的参数：

"plugins": [
  ["transform-runtime", {polyfill: false, regenerator: false}],
]

如果您不想使用像

babel polyfill

这样的全局污染polyfill，您可以在

babel runtime

中使用polyfilling逻辑。例如，如果您正在编写一个独立的库，并且不想让所有用户为您加载

babel polyfill

，或者从库中更改全局变量，这一点非常重要，这是一个坏主意

"plugins": [
  "transform-runtime",
]

---

通过这样做，您试图解决什么问题？我想使用CommonJS模块系统和ES2015语法，并在浏览器中进行简单调试。在传输之前尝试捆绑。您是否使用了任何新的ES6原型方法？最简单的方法是使用

babel-plugin-transform-runtime

/

babel-runtime

而不是

babel-polyfill

。什么是“任何新的ES6原型方法”？你能举个例子吗？