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

客官°小女子只卖身不卖艺 2023-02-14 01:44 5阅读 0赞

在使用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 一下就可以了。

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

[craco]: https://github.com/gsoft-inc/craco
[react-scripts-rewired]: https://github.com/timarney/react-app-rewired
[customize-cra]: https://github.com/arackaf/customize-cra