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

时间:2018-09-16 10:57:31

标签: javascript webpack babeljs create-react-app babel-plugin

我通过以下.babelrc使用babel-preset-react-app

{
  "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中?

1 个答案:

答案 0 :(得分: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',
                },
            },
        ],
    ],

当然,如果您将babel-preset-react-app用于客户端捆绑包,则使用create-react-app最有意义。如果您不使用create-react-app,则可以考虑直接使用@babel/preset-react,在这种情况下,您无需担心会覆盖useESModules设置。