fast163

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

功能图