如何在create-react-app里使用@装饰器

问题描述：

由于create-react-app目前还没有添加装饰器，直接用的话会报错，但项目中不得不使用装饰器，比如引入MobX。

解决方法：

我们可以根据奥卡姆剃刀原理以及鸵鸟算法 => 不使用装饰器

@observer class A {}
//等价于
const A = observer(class A {});
@action function f () {

}
// 等价于
const f = action(function f() {

});
@observable const data = 1;
//等价于
const data = observable(1);

因此

@decorator something
something = decorator(something);

JavaScript的装饰器和python几乎一毛一样，所以不用装饰器也是一样的，只是写起来没那么方便。

言归正传，进入正题，如果想在create-react-app里使用装饰器的话，只需要修改create-react-app的webpack配置就可以了，而且并不复杂，具体操作如下：

在使用create-react-app创建的项目中运行下面的命令，把使用create-react-app创建出来的项目配置信息弄出来

yarn run eject

然后可以打开config 下的 webpack.config.js文件，修改webpack的相关配置，如果熟悉webpack的话就比较好改了。大概Crtl + F搜索一下babel找到添加babel插件的地方，create-react-app的版本不一样，可能对应的位置也不一样。然后我们需要安装一下插件

yarn add @babel/plugin-proposal-decorators

如果create-react-app版本比较老的话，就用这个插件

yarn add babel-plugin-transform-decorators-legacy

在plugins里添加

 [
   require.resolve('@babel/plugin-proposal-decorators'),
   {
       legacy: true
   }
 ]

看图 

然后就可以愉快的使用装饰器了 

浏览器端

 不得不说MobX比Redux写起来轻松多了d=====(￣▽￣*)b。