React的decorators裝飾器報錯@以及后續問題解決

在初次使用React 的裝飾器時，第一次在項目中使用 @ 會報錯，原因是react默認是不支持裝飾器的，所以才會報錯，所以是需要做一些配置來支持裝飾器。

原文鏈接：https://blog.csdn.net/XH_jing/article/details/107570926

查了很多資料終於徹底解決，下面我將列出如何給裝飾器打好前戰！

基礎：create-react-app

如果沒有創建react項目后面都是徒勞啦。

npx create-react-app demo

創建好項目之后才能進行后續操作。

• 首先，安裝插件

"devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/plugin-proposal-decorators": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "customize-cra": "^1.0.0",
    "http-proxy-middleware": "^1.0.5",
    "react-app-rewired": "^2.1.6"
  }

 

• 在 package.json 中修改scripts的運行屬性值

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

 

• 在項目的根目錄下新建一個config-overrides.js文件（文件名一定不要寫錯，因為會根據這個文件名進行編譯代碼）

// 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())

 

基本完成上面這三步就可以正常使用裝飾器了，再也不會報 @的錯誤了。同時Support for the experimental syntax 'decorators-legacy' isn't currently enabled這個錯誤也將消失。

---

引入裝飾器后續問題

1. 解決函數名飄紅問題

在引入裝飾器之后，雖然不會報錯，但是下面的函數名還是會有飄紅，這時需要進行一些相應的設置。

解決方案：

打開設置 => 在搜索欄輸入 decorator 找到全稱為 JavaScript › Implicit Project Config: Experimental Decorators 的設置項，將其勾選上，保存即可。