在Babel的外部助手中使用whitelist选项

Question

我正在尝试使用用于Babel's external-helpers的汇总。这是可行的，但它放弃了一堆我甚至不需要的巴贝尔帮手，例如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 选项并不在external-helpers插件上。它在babel-external-helpers上，它实际上负责生成babelHelpers。

它是rollup-plugin-babel babelHelpers**.**注入的，并使用技巧对最终代码进行模块化。它调用babel-external-helpers来生成帮助程序，并忽略白名单参数。。见我的问题要求公开一个选项。

这种方法是正确的，因为rollup将树-抖动未使用的助手函数。但是，有些帮助程序(如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并使用rollup -c__构建它。

解决方案

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

Answer 2

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

巴贝尔成员哈动物园建议

现在，预置的目的是让人们不用定制就可以使用它--如果你想修改它，那么你只能自己定义插件或者做你自己的预置.。

但是，如果您想从默认预置中排除特定的插件，那么下面是一些步骤。按照克鲁彻的建议，您可以通过以下方式为不受欢迎的插件创建一个分叉

• 第一种是采用分叉技术。 "babel"：{“预设”："es2015“，"disablePlugins"：”disablePlugins“ }

但是，如果有两个或更多的人想要包含带有公共功能的es2015，那么您必须使用problem.For或define your own preset或extend来预置该模块。

• 第二种方法将涉及摇树，如Axel Rauschmayer博士在本文中所示。根据本文，webpack2与Babel6一起使用。这有助于移除项目中可能以两种方式使用的不必要的导入。

1. First, all ES6 module files are combined into a `single bundle file`. In that file, exports that were not imported anywhere are not exported, anymore.
2. Second, the bundle is `minified`, while eliminating `dead code`. Therefore, entities that are neither exported nor used inside their modules do not appear in the minified bundle. Without the first step, dead code elimination would never remove exports (registering an export keeps it alive).

​

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

简单的实现称为这里。

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

根据文档这里，可以实现创建插件和完善自己的预设

另外，作为一个额外的提示，如果您的任何模块具有外部依赖性，那么您也应该使用babel-plugin-transforn-运行时，bundle作为一个整体将具有相同的external dependancy，不管您是否实际使用了可能有一些side-effects的external dependancy。

rollup.js的树抖动也存在许多问题，如本文章所示。

也如预置文档中所示

默认情况下启用

这些插件不再有效果了，因为一个新的巴比伦版本默认启用了它们。

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

此外，白名单和黑名单插件的概念已经被罗甘斯在本线程中精辟地解释了。

您可以传递白名单选项以指定要运行的特定转换，也可以将黑名单传递到特定转换以禁用.。 你不能黑名单特定的插件，但你可以只列出你想要的插件，不包括你不想运行的插件。

更新:

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

“--external-helpers选项现在是一个插件。为了避免重复包含babel的辅助函数，现在需要安装并应用babel- plugin -transform-运行时包，而则需要在代码中使用babel-运行时包(是的，即使您使用的是多填充)。”

希望这能解决你的问题

希望它能对你有帮助。