在react项目中，使用craco插件进行mobx配置解决方案

在使用react项目中，不可避免的要使用蚂蚁金服出品的ant-desgin前端UI组件，ant-desgin推荐使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案），对 create-react-app 的默认配置进行自定义。

如果在项目中使用mobx进行数据状态管理，必然要对项目进行配置。因为mobx中大量使用了ES.net的装饰语法，但是装饰语法器语法目前还处于试验阶段，create-react-app默认是不支持的。

之前ant-desginUI文旦推荐使用 react-scripts-rewired 和 customize-cra ，来自定义 create-react-app 的 webpack 配置，如果使用react-scripts-rewired 进行配置的话，结局方案是：

1、首先下载依赖

npm install --save customize-cra 
npm install --save react-app-rewired 
npm install --save @babel/plugin-proposal-decorators 

2.在根目录创建项目config-overrides.js

const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
 addDecoratorsLegacy()
 );

3.修改package.json 启动配置

"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-app-rewired eject"
  },

然后重新 npm start 一下就可以了。 but 这边有一个瑕疵的地方就是

修饰器放在export default 还是报之前的错；

@testable //修饰器
export default class Two extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
}

如果我换成下方的写法。修饰器 放在 class之前就没错了。

export default @testable class Two extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
}

那么如何在craco 中配置mobx呢？

1、下载依赖

npm install --save @craco/craco
npm install --save @babel/plugin-proposal-decorators 

2、在项目根目录创建一个 craco.config.js 用于修改默认配置

module.exports = {
    babel: {
        plugins: [
            ["@babel/plugin-proposal-decorators", { legacy: true }]
        ]
    }
};

3.修改package.json 启动配置

"scripts": {
  "start": "craco start",
   "build": "craco build",
   "test": "craco test",
}

然后重新 npm start 一下就可以了。

如果解决的了您的问题请点个赞！