4

我正在尝试将 Rollup 与 Babel's 一起使用external-helpers。它有效，但它丢弃了一堆我什至不需要的 babel 助手，例如 asyncGenerator。

文档显示了一个白名单选项，但我无法让它工作

rollup.rollup({
    entry: 'src/buttonDropdown.es6',
    plugins: [
        babel({
            presets: ['react', ['es2015', { modules: false }], 'stage-2'],
            plugins: [['external-helpers', { whitelist: ['asyncGenerator'] }]]
        })
    ]
})

以上没有任何效果：所有 Babel 助手仍然被放入我生成的包中。

使用此功能的正确方法是什么，是否有白名单数组采用哪些助手名称的完整列表？

或者是否有其他一些 Rollup 插件我应该与 Rollup 一起使用来自动“摇树” babel 外部助手。

4

2 回答 2

6

问题

该babel-plugin-external-helpers插件不负责在最终包中注入这些依赖项。 它唯一控制的是生成的代码将如何访问这些函数。例如：

classCallCheck(this, Foo);
// or
babelHelpers.classCallCheck(this, Foo);

它是必需的，所以所有rollup-plugin-babel需要做的就是注入babelHelpers每个模块。

该文档具有误导性，插件whitelist上没有选项external-helpers。它位于完全独立的模块和命令行工具babel-external-helpers上，它实际上负责生成babelHelpers.

这rollup-plugin-babel就是注入的东西babelHelpers。并使用一种技巧来模块化最终代码。它调用babel-external-helpers生成助手，并忽略白名单参数。请参阅我要求公开选项的问题。

这种方法是正确的，因为汇总将摇树未使用的辅助函数。然而，一些帮助程序（如asyncGenerator）的编写方式很难检测到初始化是否有任何副作用，从而防止在 tree-shaking 期间被删除。

解决方法

我分叉rollup-plugin-babel并创建了一个 PR，它公开了在插件选项中构建 babelHelpers 的白名单选项。可以这样使用：

require("rollup").rollup({
  entry: "./src/main.js",
  plugins: [
    require("rollup-plugin-babel")({
      "presets": [["es2015", { "modules": false }]],
      "plugins": ["external-helpers"],
      "externalHelpersWhitelist": ['classCallCheck', 'inherits', 'possibleConstructorReturn']
    })
  ]
}).then(bundle => {
  var result = bundle.generate({
    format: 'iife'
  });
  require("fs").writeFileSync("./dist/bundle.js", result.code);
}).then(null, err => console.error(err));

请注意，我没有在 npm 上发布分发版本，您必须克隆 git 存储库并使用rollup -c.

解决方案

在我看来，正确的解决方案是以某种方式检测或告诉汇总这些导出是纯的，因此可以通过摇树移除。在做一些研究之后，我将在 github 上开始讨论它。

于 2016-10-16T14:56:09.730 回答
1

正如我在 GitHub 页面的这个特定问题中发现的那样。

Babel 成员Hzoo建议

现在预设的目的是让人们无需自定义即可使用它 - 如果您想修改它，那么您必须自己定义插件或制作自己的预设。

但是，如果您想从默认预设中排除特定插件，那么这里有一些步骤。正如Krucher所建议的，您可以通过以下方式为不需要的插件创建一个分支

  • 第一个是通过分叉技术

    "babel": {
"presets": [
  "es2015"
],
"disablePlugins": [
    "babel-plugin-transform-es2015-modules-commonjs"
]

    }

但是如果两个或更多的人想要包含 es2015-with-commonjs 那就有问题了。为此你必须define your own preset或extend该模块的预设。

  • 第二种方法将涉及到由Axel Rauschmayer 博士 完成的这篇文章中所示的tree-shaking。根据文章是用的。这有助于以两种方式删除可能已在项目中的任何地方使用的不需要的导入webpack2Babel6

    1. 首先，将所有 ES6 模块文件组合成一个single bundle file. 在该文件中，未在任何地方导入的导出不再导出。
    2. 其次，捆绑是minified，同时消除dead code。因此，既不导出也不在其模块内使用的实体不会出现在缩小包中。如果没有第一步，死代码消除将永远不会删除导出（注册导出使其保持活动状态）。

其他细节可以在文章中找到。

这里提到了简单的实现。

  • 第三种方法涉及为特定模块创建自己的预设。

可以根据此处的文档来实现创建插件并添加自己的预设

另外作为一个额外提示，您还应该使用babel-plugin-transforn-runtime 如果您的任何模块具有外部依赖关系，那么无论您是否实际使用它，bundle整个模块都将具有相同的.external dependancyside-effects

如本文所见，rollup.js 的摇树也存在很多问题

也如预设文档中所示

默认启用

这些插件不再起作用，因为较新的巴比伦版本默认启用它们

- async-functions (since babylon 6.9.1)
- exponentiation-operator (since babylon 6.9.1)
- trailing-function-commas (since babylon 6.9.1)**

此外， loganfsmyth在此线程中出色地解释了将插件列入白名单和列入黑名单的概念。

您可以传递白名单选项以指定要运行的特定转换，或将黑名单传递给要禁用的特定转换。

您不能将特定插件列入黑名单，但您可以只列出您想要的插件，不包括您不想运行的插件。

更新 ：

根据这篇文章，这里有一个重要的更新——

“这个--external-helpers选项现在是一个插件。为了避免重复包含 Babel 的帮助函数，你现在需要安装并应用 babel-plugin-transform-runtime 包，然后在你的代码中需要 babel-runtime 包（是的，即使你使用的是 polyfill）。”

希望这可以解决您的问题

希望它可以帮助你。

于 2016-10-15T18:45:04.530 回答