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

Question

我正在尝试将Rollup与Babel一起使用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外部助手.

Answer 1

问题

该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如果初始化具有任何副作用,则一些助手(例如)以难以检测的方式编写,从而防止在树摇动期间移除.

解决方法

我分叉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 repo并使用它来构建它rollup -c.

解

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