javascript - 如何覆盖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 中吗？

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 设置。