react 装饰器配置

使用 Create React App 创建一个新的项目后，可以如下配置装饰器

1.安装@babel/plugin-proposal-decorators

npm i @babel/plugin-proposal-decorators

2. npm i react-app-rewired customize-cra

3.修改package.json如下配置

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

4.在根目录下新建一个.babelrc文件写入

{
  "presets": [
    "@babel/preset-env"
  ],

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

}

5.在根目录下新建一个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())