让react项目支持"decorators"装饰器语法

版权声明： https://blog.csdn.net/wlk2064819994/article/details/85037461

写在前面；最近在学习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”