React 解決 使用ES7裝飾器問題方法總結

React 解決 使用ES7裝飾器問題方法總結

方法一：

1.yarn eject or npm run eject

2.在package.json中添加

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

方法二：

1.修改package.json

“scripts”: {

​ “eject”: “react-scripts eject”,

​ “start”: “react-app-rewired start”,

​ “build”: “react-app-rewired build”,

​ “test”: “react-app-rewired test”

}

2.安裝一些相關babel依賴

yarn add @babel/plugin-proposal-decorators -D

3.安裝customize-cra和react-app-rewired

yarn add react-app-rewired customize-cra -D

在根目錄下添加config-overrides.js （必須與package.json同級）

內容：

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

4.安裝裝飾器推薦 core-decorators 裏面自帶一些裝飾器

yarn add core-decorators -D

總結：當你完成上面這些步驟就能在react 中使用裝飾器了