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

Question

在我的项目中,我正在使用babel转向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); } };

在我较小的项目中,这不是一个大问题,但在我的工作项目中,我正在做同样的事情,我确信我可以通过找出一种方法来获得所有这些polyfills在一个地方,并有babel/webpack参考那些.因此,不要_interopRequire在每个使用的文件中import(几乎每个文件都有),将它放在一个地方并被引用.

有没有办法做到这一点？

Answer 1

我不知道如何处理图书馆或小项目。我认为您不会真正从使用外部助手中获得任何好处。然而，对于我的应用程序，我发现经过 gzip 压缩后，它实际上比包含助手时要小。

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

（强调已添加）

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