创建react app 2.x+mobx+axios+ant d+less3.x+react router 4.x+webpack4

写在前面：

以下creact react app以下简称CRA

本文使用堆场进行包装安装、项目启动和包装。喜欢使用npm的用户可以更改为npm命令

该项目实现了基于CRA2.x的基本项目框架，并实现了一个模仿腾讯天气的页面

本文的基本框架可用于构建企业级后台管理系统

作者构建了macOS Mojave 10.14.1环境，节点版本8.12.0，IDE是VSCode

初步准备需要节点环境。请自行搜索节点环境，这超出了本文的范围

如果你是CRA或React初学者，一定要学习GitHub上的克隆源代码比较文章

本项目旨在记录构建CRA2.x企业级项目框架的过程。顺便说一下，我在业余时间写了一个模仿腾讯天气的页面，主要是为了在项目中实际使用三个非常重要的图书馆，antd、mobx和echarts for read

本文中的所有链接都表明是学习还是选择，有基本知识的读者有权参考。如果没有基本知识的用户，请在GitHub上克隆代码并从文章中学习（再次！）

（ps）该项目的主要缺陷在于服务器。因为天气预报系统使用IP本地化，所以我使用了在开发阶段配置的代理，这没有问题。但当我将其安装到nginx服务器时，每次我默认通过IP本地化到北京时，我都会查找大量信息，并且有解决方案，但后端需要合作，但我的back-end是一个第三方api，这有点令人费解…如果你有解决方案或其他交流想法，请告诉我问题或留言让我们交流）

因为第三方api有访问流量限制，如果访问过多，页面可能无法打开。如果无法打开演示，请及时联系作者

1.打开通往CRA的道路（所需步骤）

含义：这是项目施工准备的基础

脚手架工具创建阅读App，可查看CRA详细信息

脚手架使用步骤：

npx创建反应App我的App

cd我的App

确认项目运行无问题

纱线起点

打开自定义webpack配置

纱线排出或npm运行排出

我们可以看到还有几个文件，package.json中有很多内容。这些是CRA中封装的配置。据透露，这一操作是不可逆的。此操作的意义在于，我们可以修改webpack配置和全局变量，这对于企业级开发框架是必要的

配置曝光屏幕截图.jpg

到目前为止，我们的第一步已经完成。这容易吗？

2.跨环境和全局变量配置（必需步骤）

含义：本节旨在解决跨平台开发并灵活响应不同的在线需求（测试环境、预发布环境、正式环境等）

（1） Cross env用于解决运行统一mac和windows项目的问题。在大多数情况下，它类似于Windows平台上的NODE_带有env=production的命令行指令将被卡住。使用跨ENV允许不同平台使用独特的指令，而无需担心跨平台问题

安装交叉环境纱线添加交叉环境--dev

如下配置package.json

交叉环境配置屏幕截图。天然气

注意：安装cross-env后，您只需要在每个命令行中添加cross-env。我这里有三个命令。不用说，开始就是运行开发环境。“构建：测试”和“构建：生产”做什么？交叉env后面的大量参数的含义是什么？我将在下面详细解释

（2） 配置全局变量文件

通常，我们会将api请求的服务器地址、一些固定的请求前缀、特定的appId、发布地址、api服务器地址和其他相关参数写入全局变量文件。通过全局变量文件，我们可以在开发和打包每个环境时轻松区分不同的全局变量（例如，开发环境请求的api前缀为，而正式环境为）。在企业前端开发项目中，需要全局变量文件

我的项目区分了三个全局变量，包括。env.development.env.test.env.production，分别用于表示开发环境、测试环境打包和正式环境打包

配置

全局变量文件的命名格式必须为。env.xxx并放在项目根目录中。常见的是开发、测试和生产

全球变量