在初次使用React 的装饰器时，第一次在项目中使用 @ 会报错，截图为证

查了很多资料终于彻底解决，下面我将列出如何给装饰器打好前战！

• 首先，安装插件

"devDependencies": {"@babel/core": "^7.10.5","@babel/plugin-proposal-decorators": "^7.10.5","@babel/preset-env": "^7.10.4","customize-cra": "^1.0.0","http-proxy-middleware": "^1.0.5","react-app-rewired": "^2.1.6"}

• 在 package.json 中修改scripts的运行属性值

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

• 在项目的根目录下新建一个config-overrides.js文件（文件名一定不要写错，因为会根据这个文件名进行编译代码）

// config-overrides.js 内容
const path = require('path')
const {override,addDecoratorsLegacy
} = require('customize-cra')function resolve(dir) {return path.join(__dirname, dir)
}const customize = () => (config, env) => {config.resolve.alias['@'] = resolve('src')if (env === 'production') {config.externals = {'react': 'React','react-dom': 'ReactDOM'}}return config
}module.exports = override(addDecoratorsLegacy(), customize())

基本完成上面这三步就可以正常使用装饰器了，再也不会报 @的错误了。同时Support for the experimental syntax 'decorators-legacy' isn't currently enabled这个错误也将消失。