# Frontend Lazy Dog 一行命令创建react+redux+webpack前端应用，创建后立刻使用，包含开发服务器，发布流程，样本代码集成redux，路由，按需加载等。 希望使用工具后，大家像图片上的狗一样轻松。 ## 创建背景 ### react 在中国并不流行 这是 2019 年初的前端框架使用统计，根据 google 搜索指数，npm 包下载，职位关键词等统计：https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2019-b4142f38df20 根据统计，全球 react 使用程度远超 vue。 但是在中国，我身边的同事和网上的反馈来看，用 vue 不比 react 少太多，甚至更多。 ### react 需要的先决条件太多 这个现象的原因是 react 上手太难了，不是 react 的语法难，而是要想用好 react，你需要的条件太多了： 你需要 配置 webpack 打包编译，配置各种插件优化打包，需要弄一个 server 来作为本地开发服务器，需要一个状态管理库并和 react 集成在一起。需要单独的路由库集成进 react，需要一个 ajax 库。你还要有良好的设计模式基础来组织 react 及状态管理的代码和目录以发挥它的易维护，易拓展功能。。对于现在普遍图快，压缩开发周期的团队来说，我要学的东西太多了，老子直接用 vue，自带 cli，直接用就行了。。 这个库的作用就是你只需一条命令，直接创建整个新项目，解决了不仅限于上边的所有问题。使用者只需要直接开始开发即可，然后根据需要调整下配置或环境变量即可，所有复杂的东西都给你弄好了。 ### 为什么我不用 creat-react-app 有朋友会问，create-react-app 不是挺好的吗，我承认，creat-react-app 就是一个和我的库功能相似的 react 官方脚手架。而且这个库就是基于 create-react-app 产生的。许多思想和方法都是直接借鉴的，但是它有一些问题。 #### create-react-app 的问题 ##### 难以定制化 安装后所有配置文件和依赖都不在项目代码里，都在 node_module 里，对用户隐藏，这就导致我无法根据需求定制，虽然你可以弹出，但是它的很多底层配置和工具都是 react 的 npm 包，你无法保存修改 **我的库直接把所有配置和依赖都复制放到 ci 目录里，随意用户定制或修改代码**。 ##### 难以保持统一 每次安装都是 npm install，即使有 package-lock.json 文件，仍然有可能会造成版本的变化 - **我的库使用 npm ci 安装依赖，高速，并且完全和 package-lock.json 统一**。 ##### 无发布功能 只有编译，不提供 ftp 上传等功能。- **我的库还提供 git 操作，ftp 等发布功能** ##### 代理功能较弱 默认的代理针对 url 进行一些简单的判断，没有更复杂的配置可供选择。- **我的库直接实现了一个代理中间件，除了猜测是否需要代理规则外，还可以进行复杂配置**。 ##### 无后端 mock 功能 **我的库实现了 mock 数据，直接读文件，不会触发编译** ##### 样本代码简单 没有集成状态管理，没有集成路由，对于一个单页应用来说，还需要写很多代码才能真正使用上。 - **我的库集成了 redux，路由，可一键切换动态加载和整体打包，并且样本代码都是最佳实现，重构过多次的代码并附带单元测试** ## 如何使用 ### 创建新项目 `npx app-scaffold-ci 目标文件夹` ## 目录结构 /bin 创建新项目相关脚本 /ci 脚手架及工具相关,会把这个目录拷贝到新项目根目录 /devServer 本地开发服务器业务相关代码 /errorLog 错误日志记录 /prod 生产发布业务相关代码 /templateCodeCreate 自动创建子系统，组件，相关脚本代码。 /unitTest 单元测试相关代码 /common 开发服务器和生产发布业务公用的工具或配置代码 /template 样本代码，创建新目录时候会把该文件夹做定制然后拷贝到目标文件夹 /.vscode vscode配置（debug和通用配置） /bin npm脚本的快捷命令 /build 打包输出目录 /mock 模拟数据存放目录 /public 非引用静态文件(favicon,index.html等) /src 源代码目录 /asset 静态文件 /common 存放公共的组件和方法等 /router 路由组件 /app 最外层包装组件 /moduleImport 用来根据路由加载模块，可更改index的注释切换按需加载还是整体打包 /domain 业务逻辑，每个子文件都是一个独立的子系统，相互隔离 /index.js 打包入口js /store.js redux仓库 /rootReducer.js 根reducer /registerServiceWorker.js serviceWork配置 jest.config.js jest配置文件 pkg-lock.json npm包依赖，new新项目时候，严格按照这个安装 pkg.json npm包依赖 prettier.config.js 提交git时候执行代码格式化的配置文件 readme.md 系统介绍，包含基本使用方法 ## 功能图