一、前言
最近整理了一下项目骨架，顺便自定义了一个脚手架，方便日后使用。我会从头开始，步骤一步步写明白，如果还有不清楚的可以评论区留言。先大致介绍一下这个骨架，我们采用 create-react-app 搭建基础骨架，修改一些基础配置； 使用webpack的import模块实现按需加载(俗称切片打包)； 引入 react-redux； 引入axios； 规划好项目的目录结构。我们大致就做这些事，大家可以根据自己项目需要，添加ui包等其他插件。博客的代码只是说明大致的流程，建议先拉代码，对比代码看博客。
二、目录
1、安装 create-react-app 脚手架并创建APP
2、按照上线项目标准完善目录结构
3、配置按需加载(俗称切片打包)
4、配置react-redux及redux-sagas(sagas是我个人习惯，挺好用的，不喜欢的可以不装)
5、配置axios统一请求(cookie、拦截、统一报错等)
6、代码地址 （如果觉得有用，记得给我 github 点个赞奥） ps: 说不定博主还会开放几个私有仓库 ☺
三、安装 create-react-app 脚手架并创建APP
我们直接用react的官方脚手架搭建最基础的骨架，通过 create-react-app 新建 react的webAPP。然后我们的项目就可以直接跑了，看一下package.json
文件，里面有关于项目启动、打包、测试的指令。执行 npm run start 就可以运行我们的项目了。
然后我们修改一下这个项目，因为现在 create-react-app 脚手架会把配置文件都以依赖的形式放到node_modelus里面，执行 npm run eject 把配置文件释放出来，然后执行 npm i，装一下依赖(好像不用装，我们没添加什么，笑哭~~)。
我们看一下现在的目录结构
四、按照上线项目标准完善目录结构
目前为止这个项目只有一个默认页面，放在src录下。我们按照上线项目大致会用到的东西，先完善一下目录结构
我们在src目录下新建上述文件夹，具体功能都已标明了。出于规范化、模块化考虑我们暂时将文件如此分类。
然后我们新建几个简单的页面，内容自定义，可参考下述代码：
这样我们新建几个页面 登录、注册、默认页等等，这个随意啦。然后我们看一下现在的目录结构：
五、配置按需加载(俗称切片打包)
现在我们已经有了几个最基础的页面了，我们开始做路由按需加载。
为什么要按需加载？ 因为 单页应用，只有一个html，一个主要的css、js。传统打包方式是将整个项目的js、css都打包成一个文件引入。用户浏览我们的页面
时就需要将整个项目拉下来才行(动不动就是几M甚至几十M)，非常不友好。按需加载，按照路由切割js、css，用户看哪个，就加载哪个页面代码。首次加载体验非常好。
按需加载方法有很多，我们介绍一种目前配置简单、效率也高的一种。我们采用 webpack 的 import 模块来实现按需加载。
首先，封装一个异步加载模块的组件，然后用这个组件去引入要加载的模块。代码如下：
注意，我把之前的App.js文件删掉了，我们用不上。然后新建了一个Router.js，这个文件就是我们所有模块的路由配置。然后修改src/index.js 文件，引入我们的路由文件。现在我们的路由以及路由的按需加载就都OK了。我们可以多建几个文件加上内部路由跳转试一下。执行 npm run build 看我们build文件夹, build/static/js 可以看到我们已经实现切片打包了。
六、 配置react-redux及redux-sagas(sagas是我个人习惯，挺好用的不喜欢的可以不装)
为什么要装redux？ 因为react单页应用，我们会涉及大量的数据，像用户信息等数据会在很多地方用到，这会导致组件间的数据传输很麻烦，所以我们使用redux，将变量统一管理，中心思想很简单。和我们定义一个命名空间，里面放很多变量，然后写一些方法指定性读取、修改这些变量一样，大致可以这么理解。
然后，我们安装
我习惯用sagas，不喜欢的可以不装哈。但是后序代码我都会用它来写。
装好了依赖，接下来是如何使用。大致步骤是这样的，建立reducer和sagas，然后用redux的Provider组件包裹项目，注入redux，然后就可以在组建中使用了，我们贴一下代码
使用redux大致就是这样，先引入redux，然后做具体的文件配置，最后直接组件中使用即可。注意： sagas这里，我没有做作用域处理，sagas方法名不能重复。
七、配置axios统一请求(cookie、拦截、统一报错等)
为什么封装axios？ 首先，我们使用axios作为请求方式，各方面性能吧都不错。其次，在单页应用中，涉及到的请求会非常多，对于请求拦截、响应拦截、错误统一处理等常规操作，我们把axios进行二次封装会节省大量的代码，好处不用我多说了。下边是封装axios的流程，以及使用sagas调用的方式，直接贴代码了
这个代码里面都有注释，这里简单说明一下，这个地址常亮，大家根据自己实际情况来改。关于请求的封装，这里主要写了加cookie，未登录401报错直接跳到登录页，至于其他错误处理，大家根据自己项目错误码来就好。项目中涉及到一些node.js的小功能函数，大家一百度就知道了，比如说 stringify。封装好的请求要么直接用，要么在sagas里面用。大致就是这样。
八、代码地址 （如果觉得有用，记得给我 github 点个赞奥。）
https://github.com/Aaron-China/react-cli
这是代码地址，觉得不错，您别吝啬， 地址右上方start点一下，谢谢。
小结
至此，一个精简的react骨架就出来了，没有做太多的配置，以免影响灵活度。这几项几乎都是项目中必须的东西。所以，就写到这。后期看看反应吧，把ui框架加上去，再做上菜单、权限的配置，再敲几个常用的页面。如果做的话，我会在git上开一个分支，不会影响这个基本骨架。如果博客中哪里写的有问题，欢迎评论区留言。
ps： 有点懒，好久没写博客了，将持续放点干货，希望能帮到你。