使用 babel 和 webpack 减少转译的代码助手答案

【问题标题】：Reduce transpiled code helpers with babel and webpack使用 babel 和 webpack 减少转译的代码助手
【发布时间】：2015-08-28 09:42:04
【问题描述】：

在我的项目中，我使用babel 转译为 ES5。我正在使用webpack 将所有内容捆绑在一起。有几个地方 babel 在任何给定文件的顶部添加了一个函数来支持某些功能（例如 rest params 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 中，这没什么大不了的，但在我的工作项目中，我正在做同样的事情，我相信我可以通过找出一种方法来节省更多字节将所有这些 polyfills 放在一个地方，并让 babel/webpack 引用它们。因此，与其在每个使用import（几乎每个文件）的文件中都包含_interopRequire，不如将它放在一个位置并被引用。

有没有办法做到这一点？

【问题讨论】：

标签： javascript angularjs webpack babeljs

【解决方案1】：

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

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

在 webpack 配置中，你可以像 'babel?optional=runtime' 那样做

【讨论】：

太棒了，我想这正是我需要的。但是，当我这样做时，我的dist 文件会因所有core-js 而变得臃肿。有没有办法配置 webpack 来移除我自己的代码中没有用到的模块？
另外，不仅仅是core。也是helpers。
不确定，但也许这就是你要找的东西：babeljs.io/docs/advanced/external-helpers（我个人没有尝试过，因为我使用的是 core-js，也许是大多数助手）
我会调查一下，但这对core 没有帮助:-(

【解决方案2】：

我不确定如何处理库或小型项目。我认为您不会真正从使用外部助手中获得任何好处。但是，对于我的应用程序，我发现经过 gzip 压缩后，它实际上比包含帮助程序时要小。

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

（强调）

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

【讨论】：

【解决方案3】：

使用Babel Runtime，

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

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

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

【讨论】：