javascript - 将白名单选项与 Babel 的外部助手一起使用

Question

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

文档 show a whitelist option但我无法让它工作

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

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

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

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

Answer 1

问题

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

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

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

文档具有误导性，白名单 选项不在external-helpers 插件 上。它在 completely separate module and command line tool called babel-external-helpers 上，它实际上负责生成 babelHelpers。

注入(inject) babelHelpers 的是 rollup-plugin-babel。 并使用技巧将最终代码模块化。它调用 babel-external-helpers 来生成助手，and ignores the whitelist parameter .参见 my issue requesting to expose an option .

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

解决方法

我forked 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 构建它。

解决方案

在我看来，正确的解决方案是以某种方式检测或告诉 rollup 这些导出是纯净的，因此可以通过 tree shaking 删除。做一些研究后，我将在 github 上开始讨论。