构建React企业级应用框架：CRA、MobX、Axios与Ant Design集成实践

1. 初始化React项目

首先，使用Create React App (CRA) 初始化项目:

npx create-react-app my-app
cd my-app
yarn start

然后，为了自定义Webpack配置，执行:

yarn eject

2. 安装依赖

安装MobX、Axios和Ant Design:

yarn add mobx mobx-react axios antd less less-loader

3. 配置跨环境变量

安装cross-env包以处理不同平台的环境变量:

yarn add cross-env --dev

更新package.json中的脚本，如start、build:test和build:prod，以适应不同环境。

4. 创建全局变量文件

创建.env.development、.env.test和.env.production，分别存储不同环境的全局变量。例如，API URL:

REACT_APP_API_URL=http://localhost:3000/api

5. 使用Ant Design

根据Ant Design文档配置Less，以正确加载样式:

/* webpack.config.js */
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

6. 实现示例应用：模拟腾讯天气页面

利用上述技术栈，创建一个模拟腾讯天气的应用，展示如何在项目中整合和使用这些库。

以上步骤完成了基础的企业级React项目框架设置，可作为后台管理系统模板。如有问题或解决方案交流，欢迎提出。