（1）先安装插件（浏览器环境支持，打包到浏览器后优雅降级，转为ES5）：

     yarn add @babel/plugin-proposal-decorators --save

然后在package.json文件中的babel选项中添加plugins字段：

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

（2）编辑器中环境支持配置：WebStorm默认支持（不用做配置），VScode需做配置，配置如下：

编辑器高亮（去除波浪线），配置： vscode->设置->搜索设置输入：experimentalDecorators->勾上。

// react项目中的index.js文件中：（是程序的主入口，默认会先执行的.js文件，不用暴露就可以直接执行）

// 定义装饰器(装饰器就是一个函数，是Object.definePropety的语法糖)
// 装饰器接收3个参数，分别为对象、对象的某个属性和描述对象
function readonly(target,prop,desc){
  desc.writable=false; //设置只能为只读！
}
// 装饰器：就是用来装饰变量的，用法：@装饰器名 变量名（类，类变量成员（属性和方法））
class  Dog {
  @readonly dark="wangwang";  // 定义1个实例属性
}

let dog=new Dog();
console.log(dog.dark); //wangwang
dog.dark="miaomiao"; // 浏览器报错（只读的不能修改，报错才正常） Cannot assign to read only property 'dark' of object '#<Dog>'
// console.log(dog.dark);