项目技术栈：react16+react-router4+antd-mobile2+mobx+axios+webpack4

项目github地址：项目演示：

现在比较流行的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，谢谢♪(･ω･)ﾉ。