摘要：项目技术栈项目地址项目演示现在比较流行的脚手架应该是，由官方开发。网上关于项目的目录结构也很多，那应该怎么合理地去组织我们的目录结构呢为了处理这个问题，我参考了一些项目，然后把它们的优点结合起来，最后写了这个脚手架。
项目技术栈：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，谢谢♪(･ω･)ﾉ。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95352.html
摘要：所以，我们使用来序列化第二级参数，比如张家界这样做也有个不好的地方，就是需要，然后特殊字符会变得比较丑。模块规划模块与无关划分模块可以很好的拆解功能，化繁为简，并且对内隐藏细节，对外暴露少量接口。 本项目地址：react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR)，本 Demo 仅演示浏览器渲染，请先了解一下：react...
摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...
摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...
阅读 1882·2021-11-16 11:44
阅读 457·2019-08-30 15:55
阅读 3173·2019-08-30 15:52
阅读 3406·2019-08-30 15:43
阅读 2074·2019-08-30 11:21
阅读 307·2019-08-29 12:18
阅读 1860·2019-08-26 18:15
阅读 344·2019-08-26 10:32
