使用Mobx装饰器报错：Support for the experimental syntax ‘decorators‘ isn‘t currently enabled

react mobx装饰器配置

前序：由于6版本之前的mobx需要用到装饰器@observable @action 这些默认情况下不支持。

1. 默认已经下载好了 npm i mobx mobx-react
2. 暴露出脚手架配置 npm run eject
3. 安装装饰器所需依赖

npm install --save-dev babel-plugin-transform-decorators-legacy

3. 安装应用配置 `

npm install @babel/plugin-proposal-decorators

4. package.json中添加配置

 "babel": {
    "plugins":[
    [
      "@babel/plugin-proposal-decorators",
      {
          "legacy":true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
          "loose":true
      }
      ]
      ],
     "presets":[
     "react-app"
     ]
},

测试
文件 stores/module/baseStore.js

import {observable, action } from "mobx"
class Base {
    name = 'hello world';
    @observable value = 1;
    @action increment() {
        this.value++
    }
}
export default new Base;

文件 page/index.js

import {Outlet, Link } from "react-router-dom";
import { observer, inject } from 'mobx-react';
import { Button } from "antd";

const HomePage= ({ baseStore, children }) => {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <h1>{children}</h1>
      <Button onClick={() => {baseStore.increment()}}>增加</Button>
      {baseStore.value}
      <Outlet />
    </div>
  );
}

export default inject('baseStore')(observer(HomePage));