create-react-app 支持decorator

在create-react-app創建的項目中基本上配置文件都是生成好了的。但是默認配置並不支持修飾器。所以我們在使用@修飾器的時候會報錯編譯不通過。此時我們需要增加一個依賴來支持修飾器語法。

方法一

一、暴露出 create-react-app 的所有配置

$ npm run eject

二、配置插件

在 package.json 文件中找到 babel 的配置，添加如下代碼即可：

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

重新運行項目，即可正常使用裝飾器語法。

create-react-app 腳手架中已經安裝了 @babel/plugin-proposal-decorators 插件.
如果是自己配置的腳手架，請先安裝插件

npm install @babel/plugin-proposal-decorators --save-dev

方法二(覆寫webpack的配置文件)

在package.json 的同級目錄下創建 config-overrides.js 文件
內容如下：

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