Question

我正在尝试使用ECMAScript 6构建我的网站，我选择modA.js作为编译器。

现在，如果有两个模块modB.js和// modA class A { a: 1 } // modB class B { b: 1 }，如下所示：

// modA
define(["exports"], function (exports) {
    "use strict";

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    var A = function A() {
        _classCallCheck(this, A);
    };
});


// modB
define(["exports"], function (exports) {
    "use strict";

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    var B = function B() {
        _classCallCheck(this, B);
    };
});

编译完成后，将生成两个新文件：

_classCallCheck

显然，gulp函数可以重用，事实上如果我使用更复杂的ES6功能（如生成器），则会出现更多重复的代码。

所以我的问题是：如何通过将这些代码移动到公共模块中来减少这些代码？

（ps：我已经使用{{1}}作为我的构建系统）

Answer 1

如何将这些代码移动到公共模块中来减少这些代码？

Babel已经通过runtime：

为您做了这件事

Babel使用非常小的助手来执行_extend等常见功能。默认情况下，这将添加到需要它的每个文件中。这种复制有时是不必要的，尤其是当您的应用程序分布在多个文件上时。

这是runtime可选转换器的来源。所有帮助程序都将引用模块babel-runtime，以避免编译输出中的重复。运行时将被编译到您的构建中。

...

此变换器需要包babel-runtime。运行npm install babel-runtime --save-dev将其添加到当前节点/ webpack / browserify项目中。 babel-runtime不支持像RequireJS这样的AMD模块加载器。

...

用法
require("babel").transform("code", { optional: ["runtime"] });

$ babel --optional runtime script.js

Answer 2

老实说，它被编译成可以在JS验证器（如JSHint或JSLint）上进行验证。如果你不想要冗长的编译代码，你可以简单地在Javascript minifier上缩小它们，例如 http://jscompress.com/

否则，您可以简单地使用jQuery并编写优雅的Modular Javascript代码。 https://learn.jquery.com/code-organization/concepts/

有没有办法减少babel.js生成的可重用代码？

2 个答案: