利用babel和webpack减少转接代码助手

Question

在我的项目中，我使用巴贝尔转换到ES5。我正在使用webpack将所有东西捆绑在一起。有几个地方，babel在任何给定文件的顶部添加一个函数以支持某些特性(比如rest、params、这里或import语句这里)。

例如，几乎每个文件的顶部都有这样的内容：

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

有几个文件有：

var _toConsumableArray = function (arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } };

在我的小型工程中，这并不是什么大问题，但在我的工作项目中，我也在做同样的事情，我相信我可以通过想出一种方法将所有这些填充放在一个地方，并且让babel/webpack引用这些方法，我相信我可以剃掉超过几个字节。因此，与其在每个使用_interopRequire的文件中使用import (这几乎是每个文件)，不如把它放在一个地方并被引用。

有办法这样做吗？

Answer 1

我不知道如何处理图书馆或小项目。我想你不会真的从外部帮手那里得到任何好处。然而，对于我的应用程序，我发现在than之后，它实际上比如果我包括帮助者的话要小。

Babel有一些助手函数，如果需要的话，这些函数将放在生成代码的顶部，因此它不会在整个文件中多次内联。如果您有多个文件，这可能会成为一个问题，特别是当您将它们发送到浏览器时。gzip缓解了大多数这种担忧，但仍然不理想。

(强调后加)

这就是我的解决方案，我对此很满意。(基本上，不用担心)。

Answer 2

不久前，我也有过同样的问题，在文档中有一个明确的答案：

https://babeljs.io/docs/en/babel-runtime

在webpack配置中，您可以像“babel?optional=runtime”那样做

Answer 3

使用Babel Runtime，

由于这些帮助程序可以得到相当长的时间，并且它们被添加到每个文件的顶部，所以您可以将它们移动到一个需要的“运行时”中。 从安装babel-运行时和babel-运行时开始：

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime