Question

在我的项目中，我使用babel向下转到ES5。我使用webpack将所有内容捆绑在一起。有几个地方，babel在任何给定文件的顶部添加一个函数来支持某些功能（例如rest here或import语句here}。

例如，几乎每个文件都在顶部：

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); } };

在我的smaller project中，这并不是一笔巨大的交易，但在我的工作项目中，我做同样的事情，我确信我可以剃掉超过几个字节通过找出一种方法将所有这些polyfill放在一个地方并让babel / webpack参考那些。因此，不要在使用_interopRequire（几乎每个文件）的每个文件中使用import，而是将其放在一个位置并引用。

有办法做到这一点吗？

Answer 1

前段时间我有同样的问题，文档中有明确的答案：

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

在webpack配置中，你可以像'babel？optional = runtime'

那样做

Answer 2

我不确定如何处理图书馆或小型项目。我认为你不会从使用外部助手那里获得任何好处。但是，对于我的应用程序，我发现在gzipping之后，它实际上比我包含帮助程序要小。

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

（强调补充）

这就是我的解决方案，我很满意。（基本上，不要担心）。

Answer 3

使用Babel Runtime，

由于这些帮助程序可以变得很长，并且它们被添加到每个文件的顶部，您可以将它们移动到需要的单个“运行时”中。

首先安装babel-plugin-transform-runtime和babel-runtime：

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

使用babel和webpack减少已转换的代码帮助程序

3 个答案: