React——使用装饰器 babel7.x

1. 安装依赖

cnpm i -D react-app-rewired 
cnpm i -D customize-cra 
cnpm i -D @babel/core 
cnpm i -D @babel/plugin-proposal-decorators 
cnpm i -D @babel/preset-env

2. 修改package.json文件中 scripts 脚本

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

3. 项目根目录下创建 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())

4. 项目根目录下创建 .babelrc

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