版权声明: 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”