reactjs - 我应该通过 .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 组件等中删除构造函数。

然而，documentation在 .babelrc 中显示 plugin-proposal-class-properties 如下(完全没有提及 webpack.config.js):

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

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

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

在 webpack.config.js 中包含插件(例如 proposal-class-properties)与将它们放在 中有什么有效的区别？ .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}]
}