第七章 工程化 - 实例体验 - 基于 vue框架 开发一个完整的组件库 一

基于 vue 框架 开发一个完整的组件库来体验前端工程化的魅力

对一个组件库的开发来全面认识熟悉 前端工程化 的配置，系统的理解工程化中各个工具所起到的作用，并且将其最终可以应用到你的团队当中去，真正的实现工程化的价值，帮助你的团队提效，实现作为前端工程师的价值
 
基于 vue 框架 开发一个完整的组件库会学到的知识点
 
  1、从 0 到 1 完成一套组件库工程化的搭建，了解其所涉及的全部知识。
 
  2、学会制定项目规范和代码风格，帮助团队完善统一代码质量风格检测。
 
  3、学会分支管理，提交审核，等前期校验检测。
 
  4、学会TDD测试驱动开发思维。
 
  5、学会使用 Github Action 完成 CI/CD
 
  6、学会 monorepo 风格代码管理，学会发布自己的工具包到 npmjs 市场。

Monorepo

1、什么是 Monorepo ？
 
Monorepo 可以理解为一种基于仓库的代码管理策略，它提出将多个代码工程 “独立” 的放在一个仓库里的管理模式。
 
每个代码工程在逻辑上是可以独立运行开发以及维护管理的。
 
Monorepo 在实际场景中的运用可以非常宽泛，甚至有企业将它所有业务和不同方向语言的代码放在同一个仓库中管理
 
Monorepo 概念提出虽然已经有很长的历史，但随着技术的更新迭代，以及各项工具链的完善，最近几年它逐渐开始成为一个热门的话题

2、为什么使用 Monorepo ？
 
Monorepo 只有一个仓库，并且把项目拆分多个独立的代码工程进行管理，而代码工程之间可以通过相应的工具简单的进行代码共享。
 
而传统仓库管理模式则是通过建立多个仓库，每个仓库包含拆分好的代码工程，而仓库间的调用共享则是通过 NPM 或者其他代码引用的方式进行。

3、举例说明
 
a、通常我们多个项目的结构如下：
 
// Repository - project1
 
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
|   ├── ...
├── README.md
 
// Repository - project2
 
├── node_modules/
├── package.json
├── src/
│   ├── views/
│   ├── router/
|   ├── ...
├── README.md
 
如果有公共用到的东西，会通过 npm 发包更新后，两个项目再安装更新，实现公用。这样发包很麻烦
 
b、那 Monorepo 会是怎样的展现 ？
 
示例如下：
 
// Repository - monorepo
 
├── node_modules/
├── package.json
├── packages/
│   ├── pacakge1/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
│   ├── package2/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
│   └── lib/
|   |   ├── src/
|   |   ├── README.md
|   |   ├── node_modules/
|   |   ├── pacakge.json
├── README.md
├── pnpm-workspace.yaml
 
代码共享只需要在 package.json 添加包名，然后再到项目中各自引用即可，无需再发 npm 包。

4、未来包管理 = Monorepo + pnpm
 
Monorepo 和 pnpm 结合使用，pnpm 由于 symlink 和 hard link 机制，既极大的缩小了安装包的体积，同时也解决了幽灵依赖的问题
 
未来包管理 = Monorepo + pnpm

5、Monorepo 都有谁在用 ？
 
很多大型的互联网公司都在采取这样的代码管理策略，比如 Google、Facebook、Uber、MicroSoft 等。
 
也有很多著名的前端开源库选择用这种方式来构建和管理自己的代码，比如 Vue、React、Vite、Babel、Element-plus 等。

6、Monorepo 怎么使用 ？
 
目前有挺多方式可以搭建 monorepo
 
  1、yarn workspaces：Yarn 提供的 monorepo 的依赖管理机制
  
  2、lerna：一个开源的管理工具，用于管理包含多个软件包（package）的JavaScript 项目

Pnpm

包管理器学习 - pnpm

vite

构建工具及脚手架学习 - vite

其他所需要了解的知识点

1、代码质量检测，使用 Eslint 进行代码质量检测
 
2、代码风格检测，使用 prettier 统一代码风格
 
3、统一 commit 提交校验，使用 husky 进行统一 git 提交校验
 
4、进行友好的文档开发，使用 Vitepress 进行文档开发
 
5、打包多种 js 规范的输出包
 
6、实现组件库的按需引入
 
7、持续基础 CI，基于 Github Action 回归验证
 
8、开源许可，维护自己版本，制作自己专属徽章
 
9、使用 Vercel 部署你的线上文档
 
10、编写标准的 Readme
 
11、创建 Cli 工具提高研发体验