解决方法

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助手仍然被丢弃到我的结果包中。

使用此功能的正确方法是什么，并且是否有完整的帮助列表＆＃39;将白名单数组命名为？

或者是否有其他Rollup插件我应该使用Rollup自动＆＃34;树摇动＆＃34;巴贝尔的外部帮手。

Answer 1

问题

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

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

这是必需的，因此所有rollup-plugin-babel需要做的就是在每个模块中注入babelHelpers。

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

rollup-plugin-babel注入babelHelpers是什么。并使用技巧模块化最终代码。它调用babel-external-helpers来生成帮助程序and ignores the whitelist parameter。请参阅my issue requesting to expose an option。

这种方法是正确的，因为汇总会破坏未使用的辅助函数。但是，如果初始化有任何副作用，一些助手（如asyncGenerator）的编写方式难以检测，从而阻止了在树木抖动期间的移除。

解决方法

我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 repo并使用rollup -c构建它。

解决方案

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

Answer 2

正如我在GitHub页面中的特定issue中找到的那样。

巴别塔成员Hzoo建议

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

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

第一个是分叉技术

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

}

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

第二种方法涉及tree-shaking，如本文Dr. Axel Rauschmayer所述。根据文章webpack2与Babel6一起使用。这有助于删除可能以两种方式在项目中的任何位置使用的不需要的导入
1. 首先，所有ES6模块文件合并为single bundle file。在该文件中，不再导出任何未导入的导出。
2. 其次，捆绑包为minified，同时取消dead code。因此，既未导出也未在其模块中使用的实体不会出现在缩小的捆绑中。如果没有第一步，消除死代码将永远不会删除导出（注册导出会使其保持活动状态）。

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

简单的实现称为here。

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

根据文档here

，可以实现创建aplugin并增加自己的预设

另外作为额外提示，您还应该使用babel-plugin-transforn-runtime 如果您的任何模块具有外部依赖性，则bundle作为一个整体将具有相同的external dependancy，无论您是否实际使用它，可能有side-effects。

rollup.js的树摇动也存在很多问题，如article

所示

同样如预设documentation
所示

默认启用

这些插件不再有效，因为较新的babylon版本默认启用它们

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

此loganfsmyth中的thread也明确地解释了将插件列入白名单和将其列入黑名单的概念。

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

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

更新：

根据这个article，这是一个重要的更新 -

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

希望这可以解决您的问题

希望它可以帮到你。

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

2 个答案:

问题

解决方法

解决方案