搭建基于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的过程的作法和思考。若是有不对或理解有误的地方能够指出来。