如何覆盖 Babel 的预设插件选项

Question

我正在使用 babel-preset-react-app，并且通过以下 .babelrc 进行配置：

{
  "presets": ["react-app"],
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

我需要覆盖 babel-plugin-transform-runtime 的选项。我尝试通过安装插件并以以下方式将其添加到 .babelrc 文件中：

{
  "presets": ["react-app"],
  "plugins": [
    ["babel-plugin-transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": false
    }],
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

但这对我不起作用。

有没有办法我可以不复制和粘贴整个预设到我的.babelrc文件中就能使用它？

- Boris Zagoruiko

Answer 1

看起来Babel目前不支持这些覆盖（请参见https://github.com/babel/babel/issues/8799）。幸运的是，我找到了一个针对babel-preset-react-app的解决方法。有一个未记录的选项useESModules：

['react-app'，{ useESModules：false }]

这里是一个使用babel-plugin-react-app适用于node.js的配置：

    presets: [
        ['react-app', { useESModules: false }],
        [
            '@babel/preset-env',
            {
                modules: 'commonjs',
                targets: {
                    node: 'current',
                },
            },
        ],
    ],

当然，如果你正在使用create-react-app作为客户端打包工具，那么使用babel-preset-react-app是最合适的选择。如果你没有使用create-react-app，那么你可以考虑直接使用@babel/preset-react，这种情况下你不需要担心覆盖useESModules设置。

- Matt Browne