在 create-react-app 中啓用裝飾器語法

本文簡單介紹了一下如何在 create-react-app 中啓用裝飾器語法的兩種方式。

方式一：暴露 create-react-app 的配置

暴露出 create-react-app 的全部配置

運行命令：

$ npm run eject
複製代碼

項目中就會展現出各類配置文件。

在 babel 中添加 plugins 配置

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

package.json

"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

---

方式二：直接在項目的 node-modules 中添加配置

打開項目的 node_modules 文件夾，找到 babel-preset-react-app 目錄。打開目錄下 create.js 文件。找到 plugins 屬性配置的地方，修改以下配置便可：

-isTypeScriptEnabled && [
-    require('@babel/plugin-proposal-decorators').default,
-    false,
-],

+[
+    require('@babel/plugin-proposal-decorators').default,
+    { legacy: true },
+],
複製代碼

不建議使用方式二，由於一旦須要從新安裝 node_modules， 就須要再去 babel-preset-react-app 裏面添加一次配置。

---

總結

上面兩種方式使用了以後，都可在項目中正常使用裝飾器語法，可是使用裝飾器時。可能仍是會出現紅線報錯提示，此時在 VSCode 的配置文件中（Visual Studio Code左下角的設置按鈕(或者文件>首選項>設置)）添加以下配置便可：

setting.json

"javascript.implicitProjectConfig.experimentalDecorators": true,
複製代碼

建議使用第一種方式，雖然可能比較麻煩，須要暴露出全部的配置。 可是第二種方式，若是隻是本身進行一些小的 Demo 測試還好。否則的話，一旦須要從新安裝 node_modules，就須要再從新去 babel-preset-react-app 裏面添加一次配置。

---

參考連接

redux connect的裝飾器問題