基于 React 的应用构建总结

在这篇文章中，我总结了在汽车之家基于 React 构建应用时所遇到的一部分使用问题。希望能帮助到一部分同学。

初始化

不管是 React 技术栈，还是现在很流行的 Vue，官方社区都已经提供了 CLI 工具，供大家开箱即用。而且个人感觉也是最快捷省事的方式，免受 webpack 等配置的困扰，实现关注分离。React 官方提供的 CLI 叫做 create-react-app，以下简称 CRA，使用过组内脚手架（create-autofe-app）的会感觉比较熟悉。

在终端中运行如下命令，即可迅速初始化一个项目：

之后就可以自定义自己的目录结构了，想要了解 , 可以阅读一下。

引入静态类型检查

我们也可以在初始化时就构建基于 的 react 应用：

实现静态类型检查，也可以使用 Flow，可以自行引入学习，官方也推荐使用 和 替代 .

定制化

使用 CRA 构建的应用只提供了基础功能，如 sass/less，mobx/redux，UI 库的编译打包都需要自己配置，以下是常见的 3 种处理方式。

方法1: Eject

最早常用的方法就是用 CRA 文档提到的运行 , 把位于 node_modules 中的 包中的配置暴露到全局，且该命令不可逆，需要慎重对待；之后你就可以按需配置 Webpack, Babel, ESLint 等了。这就需要对构建工具有一定的功底了，进一步提高门槛，且该方法可维护性较差，适用单一的项目。

方法2: 定制化 CRA

进一步可维护性的方案就是 fork 一份 CRA，然后根据场景需要定制化自己的 脚本。不止可以定制 webpack，而且可以定制化 react 模版，如初始化生成的 App.js，定制程度更高，维护性也更好。这里有篇博文，可以参考阅读一下，但需要对 Node 和 Npm 的使用更精通。

方法3: react-app-rewired

该方法是在不要 eject 和 fork react-scripts 的情况下，通过 merge 的方法实现覆盖 CRA 的 webpack 配置。官方提供 CLI 的初衷就是无配置化，使用户更专注于应用业务本身。

在这里你只需要使用 CRA 初始化你的项目，再通过运行 ，把该包添加到开发依赖。

之后在根目录新建一个 文件，在该文件，书写自己的配置进行覆盖：

再修改 package.json 文件的 scripts 字段：

我的项目也配置了 sass，结合起来就是：

详细的文档请移步 Github。文档中罗列了社区维护的常用 plugins 和 loaders，在这里可以找到 MobX 的配置等，而且 antd 这个 UI 库也是通过这种方式实现按需加载的。

以下是我 antd 和 MobX 的配置：

业务环境配置

在做基于 React 的项目时，就会涉及到开发/测试/生产环境，且依赖的变量可能各不相同。这时就需要用到 文件。

常用本地开发文件，需要再根目录新建 文件, 对应到的命令是 。 React 应用业务代码用到的环境变量，可以在这里配置，遵循 前缀规则：

之后在业务代码中，就可以通过 获取该变量；

部署上线的时候就会用到 文件，对应到的命令就是 ; 但是部署也可能区分测试服务器和生产服务器，并且依赖的变量不同，不管部署是否基于 jenkins 还是线下文件交流，就需要用到 shell 级别的变量：

该变量会覆盖掉对应的 文件中的值。

代理

前后分离之后经常遇到的问题就是接口跨域和需要获取用户的 。 这时就需要在 package.json 文件中配置一个参数 ：

当然电脑上也需要用host管理工具配置好正确的 IP 指向：

之后在调用接口的时候使用相对路径请求即可。

再就是有的接口需要用到 ，用 当域名启动的服务无法获取之家的 ， 启动的服务自动使用 。这时我们可以在 文件中配置：

然后本机用的 host 管理 App（如：switchhost）需要正确配置：

这时再运行 启动的服务就是用该域名了。

80 端口

如果接口服务限制必须使用 80 端口，可以在 package.json 配置：

之后，在终端种使用 命令运行：

其他问题

使用 React 做的项目可能是一个独立平台，也可能只是传统业务中的一个小页面，这时可能会遇到静态文件上传 CDN 的问题。打包应用时会基于 public 文件夹下的 index.html 生成一个目标 html 文件，该文件有对 js 和 css 的引用，如果你想在打包时就生成正确的 CDN 地址，可以在 文件中配置 参数：

结语

该文没有涉及 Router 等的使用问题，与实际业务处理相关度也不高，但希望这篇文章能帮助到一部分同学，有任何问题请联系我，共同进步，happy coding。