react项目配置装饰器

1.创建react项目并安装支持装饰器的依赖

npm install -g create-react-app
create-react-app my-first-react-app
npm install --save-dev @babel/plugin-proposal-decorators

2.在.babelrc文件中配置Babel插件：

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}

3. React中配置config-overrides.js文件

安装插件
npm install react-app-rewired customize-cra --save-dev
修改package.json，例如使用 react-app-rewired start 替代 npm start。
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

4.在config-overrides.js文件中配置添加装饰器支持的插件

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

module.exports = override(
   addBabelPlugin([
    '@babel/plugin-proposal-decorators', {legacy: true}
   ]),
);

基于以上的这些配置就可以在组件里面使用装饰器了。如果3，4步骤不执行好像启动react项目后装饰器的一直报错。原因不明。百度搜了好多都没啥好的解决方案， 特此记录一下。