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

暖生發表於2019-03-20
ReactAPP

本文簡單介紹了一下如何在 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的裝飾器問題

相關文章