前言
- 装饰器是ES6提出来的草案,装饰器又可叫修饰器(decorator)是一个函数,用来添加或修改类、属性、方法等的行为。
- decorator 是在 ES7 中定案的新语法,它可以对一些对象进行装饰包装然后返回一个被包装过的对象,使用起来非常方便。
- 但是,就目前为止,由于兼容问题,如果要在react项目中使用装饰器,需要配置一下运行环境,安装第三方插件来中转才行。
create-react-app装饰器 运行环境配置步骤:
1、暴漏 create-react-app 脚手架默认配置文件。
yarn eject
或
npm run eject
/* 注:
如果是用create-react-app刚刚新创建的项目,就去执行yarn eject 或 npm run eject时,可能会报错。
所以在运行yarn eject 之前,一定要先用 git 一下,将代码添加到本地版本库中才行。
这个问题的主要原因是,由于create-react-app脚手架在创建项目时,自动添加了.gitgnore文件,但本又没有git本地仓库,才导致在yarn eject 是报错的。
所以eject的顺序应该是如下:
1、create-react-app my-app
2、cd my-app
3、$ git init
4、$ git add .
5、$ git commit -m 'saving before ejecting init myapp'
6、npm run eject
*/
2、安装装饰器依赖插件
yarn add @babel/plugin-proposal-decorators -D
或
npm i @babel/plugin-proposal-decorators -D
3、修改package.json文件,添加或找到babel配置项,配置如下:
"babel": {
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
],
"presets": [
"react-app"
]
}
4、以上配置完成后,启动服务就OK啦!
yarn start
或
npm start
然后就可以在项目中使用@装饰器了。。。