Frontend Lazy Dog

一行命令创建react+redux+webpack前端应用，创建后立刻使用，包含开发服务器，发布流程，样本代码集成redux，路由，按需加载等。

希望使用工具后，大家像图片上的狗一样轻松。

创建背景

$3

这是 2019 年初的前端框架使用统计，根据 google 搜索指数，npm 包下载，职位关键词等统计：https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2019-b4142f38df20
根据统计，全球 react 使用程度远超 vue。
但是在中国，我身边的同事和网上的反馈来看，用 vue 不比 react 少太多，甚至更多。

$3

这个现象的原因是 react 上手太难了，不是 react 的语法难，而是要想用好 react，你需要的条件太多了：
你需要 配置 webpack 打包编译，配置各种插件优化打包，需要弄一个 server 来作为本地开发服务器，需要一个状态管理库并和 react 集成在一起。需要单独的路由库集成进 react，需要一个 ajax 库。你还要有良好的设计模式基础来组织 react 及状态管理的代码和目录以发挥它的易维护，易拓展功能。。对于现在普遍图快，压缩开发周期的团队来说，我要学的东西太多了，老子直接用 vue，自带 cli，直接用就行了。。

这个库的作用就是你只需一条命令，直接创建整个新项目，解决了不仅限于上边的所有问题。使用者只需要直接开始开发即可，然后根据需要调整下配置或环境变量即可，所有复杂的东西都给你弄好了。

$3

有朋友会问，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，路由，可一键切换动态加载和整体打包，并且样本代码都是最佳实现，重构过多次的代码并附带单元测试

如何使用

$3

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 系统介绍，包含基本使用方法

功能图