Decorators are used in the React project

First install the Babel converter

yarn add  @babel/core @babel/preset-env @babel/plugin-proposal-decorators -D
npm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators -D
Copy the code

Create a. Babelrc file in your React root directory and write to it

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

Install the react-app-Rewiredreact project service startup script

yarn add react-app-rewired -D
Copy the code

Modify the packjson.json script configurationInstall a plugin supported by React — app-Rewired

yarn add customize-cra -D
Copy the code

Write the configuration file that the decorator installs, the name of which is fixed and cannot change config-overrides

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[The '@'] = resolve('src')
  if (env === 'production') {
    config.externals = {
      'react': 'React'.'react-dom': 'ReactDOM'}}return config
}

module.exports = override(addDecoratorsLegacy(), customize())
Copy the code

Then start the service as normal

yarn start
Copy the code