【react】---react中使用裝飾器

一、creact-react-app中使用裝飾器

• 運行 npm run eject 可以讓由create-react-app創建的項目的配置項暴露出來

• 此時，項目中多了一個config文件，並且各個配置文件已經暴露出來了。(運行npm run eject之前，保證本地沒有待提交到git的文件)

• 安裝babel插件npm install --save-dev @babel/plugin-proposal-decorators react-app-rewired customize-cra react-scripts @babel/plugin-syntax-jsx @babel/helper-create-regexp-features-plugin

• 修改package.json文件的scripts配置項

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

   

   

• 修改package.json文件的babel配置項

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

   

• 在項目的根目錄下創建config-overrides.js

  const{ override,addDecoratorsLegacy} =require('customize-cra');
  ​
  module.exports=override(
     addDecoratorsLegacy()
  );

   

   

• 在項目的根目錄下創建jsconfig.json

  {
     "compilerOptions": {
         "experimentalDecorators": true
    }
  }