如何在React项目中配置Babel插件与预设以启用ES6装饰器？

我之前也踩过这个坑！折腾了好半天才把装饰器的问题搞定，结合你说的情况，给你几个关键的排查和解决方向：

1. 务必保证Babel插件的顺序正确 #

这是最容易忽略的点！transform-decorators-legacy必须放在transform-class-properties之前，因为装饰器需要优先处理类的属性定义。你的.babelrc应该是这样的：

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

如果顺序搞反了，Babel会先处理类属性，导致装饰器语法无法被正确解析，直接抛出“意外令牌”错误。

2. 匹配你的Babel版本（重点！） #

如果你用的是Babel 7+，旧的transform-decorators-legacy已经不适用了，需要换成官方的提案插件，并且开启legacy模式：

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

很多人没注意Babel版本的差异，直接沿用旧插件，自然会出问题。记得先卸载旧插件，安装新的对应包：

npm uninstall babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties
npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

3. 如果你用的是Create React App #

CRA默认屏蔽了自定义Babel配置，直接改.babelrc是无效的。你需要借助react-app-rewired和customize-cra来修改配置：

1. 安装依赖：

npm install --save-dev react-app-rewired customize-cra

2. 在项目根目录创建config-overrides.js：

const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy()
);

3. 修改package.json里的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

这样就能在CRA项目里正常使用装饰器了。

4. 检查你的装饰器代码写法 #

有时候错误不是配置的问题，而是代码本身的语法错误。比如：

• 类装饰器要放在class关键字之前：

@myDecorator
class MyComponent extends React.Component {
  // ...组件逻辑
}

• 属性装饰器要放在类属性的定义上方：

class MyComponent extends React.Component {
  @logProp
  username = '';
}

确保你的装饰器用法符合规范，没有多余的符号或者位置错误。

5. 清理缓存，重启服务 #

最后别忘了清理Babel和Webpack的缓存，有时候旧的缓存会导致新配置不生效：

• 删除node_modules/.cache文件夹
• 重启你的开发服务器
• 必要的话可以重新安装依赖：npm install

按这些步骤排查下来，应该能解决你的“意外令牌”错误！

内容的提问来源于stack exchange，提问作者KLove