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

本文主要是介绍在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 一下就可以了。

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

这篇关于在react项目中，使用craco插件进行mobx配置解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---