分享一个react单页应用脚手架

项目技术栈：react16+react-router4+antd-mobile2+mobx+axios+webpack4
项目github地址：https://github.com/longtoken/...
https://github.com/longtoken/...
项目演示：https://frontendfunny.site

如今比较流行的react脚手架应该是create-react-app，由Facebook官方开发。咱们能够发现用create-react-app生成的项目的目录结构是比较简洁的：

须要咱们本身根据实际的项目状况去建立对应的目录结构。网上关于react项目的目录结构也不少，那应该怎么合理地去组织咱们的目录结构呢？

为了处理这个问题，我参考了一些react项目，而后把它们的优势结合起来，最后写了这个脚手架。

lt-self-cli是参照create-react-app的源码，去掉了其中关于下载模块的代码。用来生成咱们的项目。

咱们首先全局安装一下这个模块：
打开Windows PowerShell(mac的话打开终端)，而后执行npm install -g lt-self-cli

而后就能够在本身的工做目录使用命令 lt-self-cli myapp

工做目录下就会生成一个叫myapp的文件夹，咱们用cd myapp进入该目录

进入myapp目录后使用npm install安装模块，使用npm start就能够启动项目了。

咱们先看看这个项目的目录结构：

config目录里面存放的是webpack各个环境的编译文件
src目录里面是咱们主要的开发文件
components目录存放的是containers引用的组件
containers目录存放的是react-router的路由组件
router目录存放的是项目的路由配置
static目录存放的是项目的静态文件
stores目录存放的是项目的mobx文件
utils目录里面是一些工具函数，目前写了一个axios的封装

使用npm run build进行编译，编译后的目录：

基本的生产配置都加上了，好比：
css文件使用了autoprefixer自动添加浏览器私有前缀并用mini-css-extract-plugin提取出来，使用link标签加载。
react-router作了按需加载，把新增路由添加到router配置便可。
webpack-bundle-analyzer用于查看打包以后各个模块的体积大小，在webpack生产配置文件build.js中的plugins里面加上new BundleAnalyzerPlugin()便可使用。

目前该项目使用的是mobx做为数据管理方案，mobx使用起来比redux简单，开发起来比较快，没有那么多的模板代码。
而redux用起来就麻烦了，除了要写一堆模板代码以外，还须要引入redux-thunk或者redux-saga去处理异步问题。而后为了优化性能还会引入immutable.js。
固然redux比起mobx是更加符合react的思想，并且如今多数项目都是react+redux的模式。因此后面会用redux再写一版。

该项目会持续更新，有任何问题均可以指出。以为有帮助的能够在github上点个Star，谢谢♪(･ω･)ﾉ。