前面的话
- 首先，这篇文章是友情转发；
- 其次，虽然是友情转发，但是个人觉得朋友的思路挺不错，从另外一个角度分析问题，并提出了他自己的一些方案。最终汇总整理成一个开源项目。欢迎大家拍砖。项目地址： github.com/jackhutu/qi…
为什么需要定制
我们先来看一个基础的前端项目结构
├── config // webpack配置目录
│ ├── dev.config // 分环境区别配置
│ ├── ...
├── dist // 输出目录
├── src
│ ├── actions // 状态管理- action函数
│ ├── api // API 请求相关
│ ├── assets // css 和图片资源
│ ├── components // 项目公共组件
│ ├── pages // 页面目录
│ ├── reducers // 状态管理- reducer函数
│ ├── sagas // 状态管理- saga相关
│ └── store // 生成store
│ ├── utils // 工具函数
│ └── index.html // 主页html
│ └── routes.tsx // 路由配置
│ └── index.tsx // 入口文件
├── .babelrc // babel配置
├── .eslintrc.js // eslint配置
├── postcss.config.js // postcss配置
├── tsconfig.json // ts 配置
├── package.json
这样一个基础项目架构开发单个项目是完全没有问题的, 可是如果我们的项目越来越多, 我们怎么办呢?
是把现在的项目打个包发给另一项目组的同学, 安装依赖, 再删删减减吗?
还是弄一个样板项目, 放在仓库, 当有新项目时就拉下来, 揉揉改改, 更新依赖, 开干.
可是无论你采用哪种方式, 随着时间的推移, 这些项目最后都变的面目全非, 在各项目组的配置工程师的超神发挥下, 各种配置, 组件五花八门.
就像长满杂草的果园,任由其疯长, 无法控制. 当有一天想统一规范, 优化, 添加工具等等之时, 由时已晚.
而这期间, 各项目可能做着某种重复的, 基础的工作, 开发效率可见一斑, 快速开发更是无从谈起.
而那个所谓的样板项目可能早已年久失修, 即使升级也无法应用到各项目中去了.
如何定制
- 封装
我们可不可以只开放开发工程师所聚焦的地址, 而将他们不关心的东西放到箱子里.
以上面的项目结构为例, 开发工程师除了src目录, 其它的都不关心,也不想关心, 我们把这些配置相关的都封装起来.
- 简化
对于开发过程中繁琐的地方, 将它简化,比如基于redux的数据流状态管理方案, 每次都要从action到reducer, saga等定义一遍, 再用常量串起来, 太繁琐, 我们可以将它简化, 但又不失原有特性.
当然能够简化的场景还有很多
- 工具
业务开发的需求场景总是复杂多变的, 而有没有趁手的工具决定着开发的速度.
- git 工作流
在工作中, 我遇到过, 有人把别的同学qa代码合并发到线上的, 由于分属不同产品, 上线几天才发现的. 也有人用小乌龟, vscode git工具等一顿骚操作, 代码都找不见的.
显而易见这种会引起上线事故的是一定要用工具来规范, 而靠个人约束肯定是不行的.
-
组件库
组件库的本质就是工具, 组件够不够抽象, 决定着能不能覆盖更多的场景, 太过抽象却又增加了开发工作量, 所以抽象的基础组件, 具体场景实现的组件缺一不可. -
mock
当后端接口还未提供, 也没有文档之时, 如何快速mock出想要的接口非常重要, 它决定着你的开发是否流畅, 是否能够行云如流水, 一气呵成.
什么样的mock工具是我们最想要的, 你可以尝试过各种各样的,类如yapi, 或者自己架一个代理服务器, 利用mockjs搭建mock server, 新接口走这里, 老接口原路不变.
能不能有一个智能的mock工具, 能利用我项目中已有的数据结构快速的做好增删改查, 成功,错误等多种状态的接口. 不要太多配置, 一行命令就能搞定.
就像一个强大的后勤, 能为战场上的士兵提供各种武器弹药...
如何实现
Qilinjs(麒麟)
Qilin 就是一款基于以上思路打造的一款基于react生态圈的轻量级的前端应用框架.
Qilin 重点将致力于规范管理(如: git flow 等)以及可快速开发工具(如: mock, 简化数据流等), 尽量保持用户原生开发习惯, 不做过度封装.
特点
对于统一的规范管理, Qilin 通过内置个性化的配置, 减少用户配置, 就像 prettier 对于 eslint, 如果 Qilin 是一个人, 那他将是一个性格特点鲜明的一个人, 而不会是对谁都讨好的老好人.
对于业务开发层面, Qilin 期望能提供一件件趁手的工具, 但不希望过多改变用户原生开发习惯, 简化的数据流方案本身也对用户的原生开发习惯做出了改变, Qilin 会减少这种情况, 在可快速开发和过度封装之间取得平衡点
快速开始
# 创建目录
$ mkdir myapp && cd myapp
# 用工具创建项目
$ yarn create @qilinjs/qilin-app
# 或 npx @qilinjs/create-qilin-app
# 安装依赖
$ yarn
# 启动开发
$ yarn start
目前Qilin还在完善中, 现仅实现了简化的数据流方案, 和开发, 构建的封装,期望在 1.0 能提供较为完善的以上功能
更多介绍: qilin.jackhu.top/
项目地址: github.com/jackhutu/qi…
欢迎大家star, pull, pr
