背景契机

很久之前,我就想着自己能够从头开始参与开发一款前端组件库,来锻炼自己的编程能力和协作水平。当时还摸索着学了如何发布了一个 NPM 包,测试的包名是 @barry-flynn/bfui ,可惜由于后来精力和动力不足,该想法也没有再进行下去,不久后我会将该包设置为弃用状态。2023年初,机会来了,字节跳动“第五届青训营”的大项目题目之一就是 组件库,另外两个题目是 基于SSR开发仿掘金站点关于新冠疫情的数据可视化作品


组队立项

这届青训营大概有4000多名学员,光基础班就有3000多人。临开课前,大家在活动群里大家都展示着自己的技术栈,寻找合适的同学组队。实话实说,看着那么多人的消息刷屏,又感受到了之前参加第二届青训营的压迫感,感觉自己分分钟淹没人海中。

  • 在1月12日晚上顺利完成了组队,于是接下来的时间我将与其他五位队员完成组件库任务的开发。

  • 在1月13日上午,团队成员来了场语音会议,商讨了一些开发细节,初步暂定如下:

    1. 组件库名将延续 BFUI 和其LOGO,并在GitHub建立了组织 BF-Teams
    2. 开发语言:Vue2 + JS + TS/Es6、babel + flow,Css预编译器采用 Less
    3. 代码风格:Eslint + prettier
    4. 打包工具:Vue-CLI + Webpack
    5. 依赖管理:npm
    6. 版本控制:Git + GitHub
    7. 文档构建:VuePress 2
  • 经过研究讨论,对技术选型进行了一些调整:

    1. 开发语言:项目确定要使用 TypeScript,考虑到 Vue2 对其支持不是很好,故更换为 Vue3
    2. 依赖管理:参考了多个同类组件库,最后考虑到 Vue 生态仓库逐渐迁移到 pnpm,故更换为 pnpm 管理依赖
    3. 打包工具:由于 Vuepress2 默认打包工具是 Vite,考虑到方便且构建速度问题,决定使用 Vite 进行项目构建
  • 因此本项目采用的技术栈大致如下:

    1. 开发语言:JS + Es6 + Less + Vue3 + Babel + TS
    2. 代码风格:Prettier + ESLint + stylelint
    3. 代码提交:husky + lint-staged + commitlint
    4. 打包工具:Vite
    5. 文档构建:VuePress2
    6. 依赖管理:pnpm
    7. 版本控制:Git + GitHub
    8. 测试工具:Jest
  • 2023年01月25日,创建npm组织 bf-teams


目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<root>
├─ docs/ # 项目文档目录
│ ├─ en/ # 英文文档
│ │ ├─ guide/
│ │ │ ├─ getting-started.md
│ │ │ └─ index.md
│ │ ├─ component/
│ │ │ ├─ button.md
│ │ │ └─ index.md
│ │ └─ index.md # 英文文档首页
│ ├─ zh/ # 中文文档
│ │ ├─ guide/
│ │ │ ├─ getting-started.md
│ │ │ └─ index.md
│ │ ├─ component/
│ │ │ ├─ button.md
│ │ │ └─ index.md
│ │ └─ index.md # 中文文档首页
│ └─ index.md # 项目文档首页(与中文文档首页相同)

├─ packages/ # 项目模块目录
│ ├─ components/ # 组件代码
│ │ ├─ button/ # 单个组件
│ │ │ ├─ __tests__/ # 单元测试
│ │ │ ├─ src/ # 组件源码
│ │ │ │ ├─ button.ts
│ │ │ │ └─ button.vue
│ │ │ ├─ style/ # 组件样式
│ │ │ │ └─ button.less
│ │ │ ├─ index.ts # 组件入口文件
│ │ │ └─ README.en-US # 组件英文文档
│ │ │ └─ README.zh-CN # 组件中文文档
│ │ └─ index.ts # 组件库入口文件
│ └─ utils/ # 公共方法

├─ scripts/ # 自定义脚本命令目录

├─ test/ # 测试目录
│ ├─ e2e/ # E2E UI测试
│ ├─ snap/ # snap 快照测试
│ ├─ utils/ # unit 单元测试
│ └─ README.md # 测试规范

├─ typings/ # 类型声明目录

├─ utils/ # 自定义工具函数目录

└─ README.md # 项目自述文件

【参考内容】

[1] 【☆】参与前端开源项目你应该了解的知识

[2] 【☆】vue3组件库搭建
使用 pnpm 当做包管理工具,用 pnpm workspace 来实现 monorepo 多模块管理。

[3] 【☆】实习生在开源项目的求生经历:认识项目

[4] 【☆】企业级前端组件建设

[5] Vue 注册组件,抽离 withInstall 方法

[6] 前端组件单元测试

[7] 【实战】Vuejs项目如何做单元测试

[8] 从0到1 开发一个自己的ui库

[9] 如何开发一个基于 Vue 的 ui 组件库(一)

[10] 基于vue-cli封装自己的ui组件库并上传到npm

[11] 手把手做一个基于vue-cli的组件库(上篇)

[12] 步进式解读Apache许可证

[13] 使用 Vue3+TS+Vite+PNPM 搭建前端工程基础工作流配置