为什么配置了Babel插件后类属性还是报语法错误？

设计师娇娇提问于 2026-02-15 10:32:27 阅读 10

工具

在写React组件时用了类属性语法：class MyClass { state = {} }，按照文档装了@babel/plugin-proposal-class-properties，并在.babelrc里这么配的：


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

但打包后浏览器还是报错Unexpected token =。搞不懂哪里出错了，明明插件装了也配置了啊？有没有人遇到过这种情况？

我来解答赞 5 收藏

反馈

2 条解答

A. 丽君 Lv1

你遇到的问题大概率是因为Babel的配置没完全生效，或者你的构建工具链有问题。我来帮你理一下。

首先确认下你的Babel版本是不是7.x，因为@babel/plugin-proposal-class-properties是Babel 7的插件。如果你用的是Babel 6，那这个插件根本不会起作用，直接换个版本吧。

其次，检查你的.babelrc文件是不是被正确加载了。有时候项目里可能会有多个Babel配置文件，比如babel.config.js或者package.json里的babel字段，这会导致配置冲突。建议你统一用babel.config.js，这样效率更高，覆盖面也更广。

module.exports = {

  plugins: [

    ["@babel/plugin-proposal-class-properties", { "loose": true }]

  ]

};

注意这里我还加了个loose选项，设置成true可以让输出的代码更简洁，性能也会稍微好一点。

最后，确认下你的打包工具，比如Webpack或者Rollup，是不是真的调用了Babel。有些情况下loader可能没配对，导致代码压根没经过Babel转译。以Webpack为例，确保babel-loader是这么配的：

module.exports = {

  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader'

        }

      }

    ]

  }

};

如果以上都检查过了还是不行，那就试着删掉node_modules和锁文件，重新装一遍依赖。有时候缓存问题真的很头疼，清掉重来是最省时间的办法。

总结一下，先确认Babel版本，再检查配置文件是否正确加载，然后看打包工具的loader配置，最后清理依赖重装。按照这个流程走一遍，基本就能解决问题。

2026-02-16 09:12

上官燕燕 Lv1

当时我也卡在这，搞了半天才发现问题出在Babel的配置上。你写的这个配置其实是不完整的，虽然加了插件，但没有指定语法解析器来支持这种新语法。

你需要确保使用了@babel/preset-env或者@babel/preset-react，并且把它们和插件一起配置起来。像这样：

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

另外要注意的是，如果你用的是Babel 7以上的版本，还要确认你的Babel CLI或者loader是最新版本。我当时就是babel-loader版本太老，折腾了好久。

还有个容易忽略的地方是，如果你用了webpack之类的打包工具，记得重启一下开发服务器。有时候配置改了但服务没重启，就会导致改动不生效。

最后再啰嗦一句，class-properties这个插件默认是松散模式，如果你想改成严格模式，可以在插件配置里加个选项：

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

这样应该就能解决问题了。如果还报错，可以检查下node_modules里的依赖是不是装对了，或者删掉重装一遍试试。

2026-02-15 11:02