App-scaffold-ci NPM

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