我应该通过 .babelrc 还是 WebPack 配置 Babel？

Question

在我的React项目中，webpack.config.js 引入了如下的提案类属性：

...
module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        query: {
          presets: ['@babel/react', '@babel/preset-env'],
          plugins: ['@babel/proposal-class-properties']
        }
      },
    }
...

通过包含，@babel/proposal-class-properties我可以从我的 React 组件等中删除构造函数。

然而，该文件显示plugin-proposal-class-properties在.babelrc如下（并没有提及webpack.config.js在所有）：

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

而我的.babelrc根本不包含任何插件：

{
  "presets": [
    ["@babel/env", {
      "modules": false
    },
    "@babel/preset-env"]
  ]
}

将插件（例如proposal-class-properties）包含在webpack.config.js与将它们放入相比之间是否有任何有效区别.babelrc？

Answer 1

可以通过.babelrc或者通过babel-loaderwebpack中的配置来配置babel 。它们的工作原理完全相同。

但是，我建议仅.babelrc用于配置 babel。这样它也可以在您运行测试时工作，这些测试通常不通过 webpack，因此不会有 babel 的 webpack 配置。

.babelrc：

{
  "presets": ["@babel/preset-env"]
  "plugins": ['@babel/plugin-proposal-class-properties', {'loose': true}]
}