app-scaffold-ci
v6.7.2
Published
a scaffold for frontend developer to develop web app based webpack,react
Downloads
2
Maintainers
Readme
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 系统介绍,包含基本使用方法