搭建基于react项目的心得

前段时间部门要基于一个系统的基础上开发一个管理平台，于是我接手了该平台的重活，因为上一个平台我用了vue搭建，所以这次想用react来搭建。在项目开始之前，不能心急立刻去搭建，需要设定几个步骤来开展，接下来大概的说一下我从技术选型到项目前端搭建好的整个生命周期。

技术选型

在项目开始之前，首先要决定该项目所采用的技术框架。在该阶段，需要分几个维度来选择：
a)核心的前端框架；
b）该框架所配套的路由器；
c）状态管理器；
d）异步请求npm包；
f）组件库；
g）前端构建工具；
h）联调前的mock层技术；

基于这些维度，我选择了react一系列核心技术和其配套技术，webpack由于求稳所以选择了一个不高的版本（怕最新的版本会有很多想不到的坑），然后组件库因为上一个项目中用了element.ui，所以比较熟悉他的用法（最主要该组件库里面的坑我上一个项目踩过，所以知道要如何回避）；至于异步请求我还是选择了用superagent（原因在第2步中会说到），mock层我选择了mock.js（但最后我还是没使用，后续会说）；

- 技术调研

虽然已经选择了要使用的技术，但开始之前还是有必要做一个较为深入的调研，这样会对已经选择的技术又一个大概的使用思路和适不适合使用该技术做一个最后的思考。
a）对于react，我查了一下他最近一年半的发布版本，然后决定还是用回15.6的版本（好像是17年9月份发布的），主要是因为最新的里面好像要除去一些生命周期，如果用太新，可能在开发过程中会采坑，影响项目的进度。

b) react-router的版本选择，目前有rr3和rr4两个版本，其中rr4不支持路由集中配置，这会引来一系列要解决的问题，如代码分割（觉得官方处理分割的手法挺麻烦的）等，虽然rr4的组件路由配置挺不错的，使得在大项目中不会导致路由文件过重，但对于不大的项目路由组件配置分散的话是不利于维护，所以还是决定用rr3（后续还有项目就用一下rr4体验一下）。

c）对于基于react的项目来说，有两个方面处理起来是挺麻烦的，一个是组件如何减少重复或者没必要的渲染；另一方面是redux的使用，redux的使用无疑是加大了项目的复杂度，但不用也不行，这时候会有人说其实用mobx也挺不错的，确实，他的响应式编程挺好的，处理起来是的很简单直观，然而它存在很多暗坑（网上有说，这里就不说了）。
为什么说redux难，难于在处理异步和数据同步，这里有很多优异的中间件如redux-thunk等，而该项目中我使用的是我自己写的中间件（有兴趣可以看一下我之前的博客如何写redux中间件，由于公司有严格的规定不能泄露项目代码，虽然都是自己写，但还是不贴出来，后面会说一下实现原理）。
d）superagent和axios的选用，两个都是很好的异步请求包，然而这里选择前者，主要的原因可能偏主观一点，是因为superagent用的多，比较熟悉，而且他的链式调用挺方便的。

- 创建项目

这里最主要公司有一套自主研发的代码仓库，不需要用到外面的代码仓库，所以只能从遵该仓库的使用规则创建，如自己写远程编译的sh脚本，第一次创建还要写打包脚本等等，其实这一步在其他公司是不用花太多时间在这一步的，直接创建上传到github或者gitlab就好了。

- 配置打包

这里就没什么好说的，直接看图就行了。

- 预编译器

这里的坑很大，主要不是因为sass使用难，而是因为sass是服务器编译的，所以在远程仓库中编译的时候会经常失败，主要原因是因为node-sass中的vendor文件夹有两个版本，一般本地mac开发webpack编译的是:

而仓库本身具有打包编译功能，它用的是linux，linux则需要

看上去似乎很简单，但发现这原因可找了很久。

• 异步请求

一般来说，一个前端项目不可能直接通过superagent或者axios发起请求，必须对其进行封装，我这里整个请求体系有三部分组成：

• 中间件

redux有很多优秀的中间件，但要适合项目的需求还是由自身开发的中间件会更贴近。中间件的代码其实就是二三十行左右，但却比较抽象，中间件的结构直接决定action的结构，所以一般先制定好action的具体形式，然后反向推敲中间件的结构。

• mock层

本来想用mock.js，技术调研的时候就查清楚使用方法，以及如何使用，但以实际落实，却很多问题，最主要的问题是mock更多的是支持jq形式的ajax，对于fetch事件不支持，只能通过其他插件如mock-react之类的，这使得mock层成为了一个累赘，与原来加入mock的初衷相反了，所以最后用来webpack-dev-server中的before服务器以及proxy代理，共同完成了mock层开发；
但有考虑到有可能一不小心mock会影响到线上，所以这里对所有的api进行改造，如果是dev模式且开启了mock层服务，所有的api后面加上’_mcok’字符串。

开发该项目的底层的内容远不止这些，但由于公司制度规定，只能大概的阐述了在从接手到选型到搭建完毕这0到1的过程的做法和思考。如果有不对或理解有误的地方可以指出来。