即使安装了相关的Babel插件，“缺少类的属性也会发生转换”

Question

我已经使用以下模板在React中启动了一个项目： CoreUI React

它没有附带属性转换插件，所以我安装了它。我的babelrc文件如下所示：

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

我的开发依赖项：

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "copy-webpack-plugin": "4.3.1",
    "css-hot-loader": "1.3.6",
    "css-loader": "0.28.9",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "source-list-map": "2.0.0",
    "style-loader": "0.20.1",
    "uglify-js": "3.3.9",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.11.1"
  }

我没有更改webpack配置文件中的任何内容（我应该吗？）我的webpack配置文件的一部分：

module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(scss)$/,
          use: ['css-hot-loader'].concat(extractSCSS.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {alias: {'../img': '../public/img'}}
              },
              {
                loader: 'sass-loader'
              }
            ]
          }))
        },
        {
          test: /\.css$/,
          use: extractCSS.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          use: [
            {
              // loader: 'url-loader'
              loader: 'file-loader',
              options: {
                name: './img/[name].[hash].[ext]'
              }
            }
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[hash].[ext]'
          }
        }]
    },

一旦我尝试使用开发服务器进行编译，就会遇到讨厌的错误，该错误指的是在我的基于类的组件之一中定义的属性。

我知道这个问题以前曾在这里提出过，但似乎没有一个帖子与我的类似设置有关，所以我在那里找不到解决方案。

主意，有人吗？

Answer 1

您必须options.presets从babel-loader配置中删除密钥，因为否则Babel会选择这些预设并忽略您的.babelrc文件。

另外，您可以在中提供整个配置webpack.config：

options: {
    cacheDirectory: true,
    presets: ["react", "env"],
    plugins: [
        "transform-class-properties",
        "transform-object-rest-spread"
      ]
}