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组件等中删除构造函数。

但是，documentation在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或通过webpack中的babel-loader配置来配置babel。 它们的工作原理完全相同。

但是，我建议仅使用.babelrc来配置babel。这样，它在运行测试时也可以正常运行，而这些测试通常不会通过webpack进行，因此将没有babel的webpack配置。

.babelrc：

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

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

1 个答案: