react、create-react-app装饰器 运行环境配置

前言

• 装饰器是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

然后就可以在项目中使用@装饰器了。。。