寫在前面；最近在學習ESNext，當學習到裝飾器部分時，就需要讓專案支援裝飾器語法，但是在網上搜索了一番，沒有讓我成功的。幸好在各種摸索中，我最終還是成功。於是我寫下這篇文章，希望對需要它的人有所幫助，同時也是當作自己的一篇筆記。

此次配置我是在react專案中進行配置的，目的是讓react專案中的高階元件支援裝飾器語法，當然讓它能與mobx配合使用也是我的目的之一。

具體步驟：

一.新建react專案

create-react-app "專案名"
cd "專案名" 

二.安裝decorators依賴(如果配合mobx使用，當然也可以安裝一下mobx和mobx-react依賴)

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

三.釋放配置檔案

npm run eject

注意：在釋放配置檔案時，可能會報如下錯誤：

解決方法是：

git add .
git commit -m "message"

四.修改package.json檔案

將:

"babel": {
    "presets": [
      "react-app"
    ]
}

改為：

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

到此你的react專案就支援裝飾器語法了。
你可以自己寫裝飾器形式的高階元件了，也可以使用裝飾器語法簡化mobx這類狀態管理庫的使用了。



附錄：
這篇部落格配置裝飾器語法支援使用的各個依賴的版本說明：

“react”: “^16.6.3”,
“webpack”: “4.19.1”,
“@babel/plugin-proposal-decorators”: “^7.2.2”