"Missing class properties transform"，即使在安装了相关的 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]'
}
}]
},

一旦我尝试使用 dev 服务器进行编译，我就会收到一个令人讨厌的错误，它引用了我的一个基于类的组件中定义的属性。

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

想法，有人吗？

Answer 1

你必须从babel-loader配置中删除options.presets键，否则，Babel 会选取这些预设并忽略你的.babelrc文件。

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

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