组件库开发准备之基础架构梳理

好了，在进入正式编码之前，我们需要先来讲讲本次开发组件库所需要使用到的所有技术栈，以便于大家在学习之前可以对我们将要使用的工具栈有所了解。

本次的技术栈会对标Element-ui的目录架构设计，讲解其中的一些设计原理以及学习其中一些比较好的思路去解决工程化中的问题，在我们翻看大型知名的组件库源码当中，可以发现，每一个项目都不仅仅只是一个单一的组件库，他通常包含最基础且核心的组件库目录，其次需要一个可以实时调试的测试项目用于查看组件库开发中的一些实时效果，第三需要一个非常完善的组件库文档（这一点也尤为重要，常常会早于组件库的开发前对齐进行建设），除此之外，项目还会包含一系列便捷的开发脚本和Cli工具等等项目，所以基于一个 Repo 多个软件包的项目结构，我们需要使用Monorepo的风格对项目进行管理，在此之前我们来简单了解下什么是monorepo：

什么是Monorepo?

Monorepo其实是一概念，在软件工程领域，它已经有很多年的历史了，所以，他并不是一个新奇的产物，也很好理解，就是把多个项目放在同一个仓库，与之相反的则是MultiRepo概率，就是每个单独的项目对应一个仓库来单独管理，相信日常开发中，我们对后者的这种形式更多，毕竟都喜欢从零开发开发项目。

我们学习这些组件库开发外的知识不仅仅是为了本次的开发，也希望各位可以将其真实的运用到项目当中去，那么要想将一项技术真正的用于实际的工作中去，我们需要对其了解的更加清晰一点，有什么用，解决了什么痛点，带来了什么收益，只有结合自己团队和项目需求的真实情况才能决定是否使用：

MultiRepo的痛点？

首先我们需要知道，在使用Monorepo之前，我们需要了解到MultiRepo场景的痛点，在传统项目开发中，每一个项目都是独立的，也就意味着从环境配置，代码复用、版本管理、项目基建、公共类库等等方面在每一次新开项目的过程中都需要统一管理，这样导致每个项目之间可能存在差异，比如，不同版本的公共类库使用，一处的变更会导致不同的项目都需要同时变更，假设ci流程、配置发布流程等等这些配置发生变化，多项目意味着每一个项目都需要改变，显然，这样的成本是巨大的，在后续维护中可能会面临更高的成本。

Monorepo有何好处 ？

上述简单的解释了传统开发中的痛点，那么很显然与之相反的则是我们使用Monorepo的好处了。首先其具有统一的工作流，由于项目都在一个仓库下面，复用起来非常简单，比如，我们公司的项目中有一个统一登录的模块，是使用npm包的形式引入，此时，如果这个包进行了更新，传统项目当中，我们的所有项目都需要更新，而在此项目当中，我们只需要进行一次更新即可覆盖到所有项目。

其实以这样的架构去建设的项目，通常所有项目的环境保持统一，减少了项目之间出现不同环境配置差异而带来的难以理解奇怪场景出现。

同时项目基建成本也会降低，所有需要复用的统一配置，比如代码质量检测、代码风格检测、cicd发布部署、这样都会变得更加简单，可以投入更少的开发资源对齐进行维护。

同样也让团队协作变得更加轻松，更多场景的代码复用，而不需要新开项目的时候还得去寻找老的项目，常常出现去cv老项目的情况出现。

如何使用和落地Monorepo

那么在我们对齐概念已经有了一定了解的时候，此时你可以思考下你的项目当中是否有这样的需求，或者被上述的痛点所影响到，如果你发现使用Monorepo可以对你提效很多，可能会想要快速对其进行实现落地，然而实现这样的架构体系并不是简简单单的将多个仓库的代码放入到一个仓库当中。

在实际使用的过程中，同样对应了一套完整的工程化体系来进行支撑，因为基于 Monorepo 的项目管理，需要考虑诸多问题，比如：项目间的依赖分析、构建流程、测试流程、Ci持续集成、多项目性能问题等等一系列涉及工程化的问题，这么多的问题放在个人开发者身上是很难有精力去实现的，好在社区已经提供了一些成熟的方案供我们直接使用了，比如lerna就是一个不错的选择，且其在Pnpm workspace出现前可以说是一家独大，在Pnpm workspace出现后，我们多了一种选择，我们也会在随后的项目实战中使用最新的Pnpm workspace方式进行我们的项目开发。

在了解完我们的组件库使用的项目目录结构之后，我么需要对第二个我们使用频率高的工具进行选型，就是开发构建工具，这一点对于我们的开发显得尤为重要，当前我们接触最多的是webpack，但是相信使用过的同学都会被在项目庞大时漫长的编译时间所折磨，所以本次我们使用相对跟随vue3同步出世的构建工具Vite来进行开发，一是我希望对新技术尝鲜，二来，vite在本地开发的效率极高，对于我们的开发体验也是极好的。

为什么要选用Vite技术栈？

在Vite出现之前，例如Element-ui这样的项目一般使用下面的这些工具栈：

• 构建工具 => Rollup
• 文档建设 => Markdown+Webpack
• 单元测试 => Jest

可以看到，其实在Vite出现前，绝大部分的组件库项目都是使用RollUp打包的，其开发也更适用于组件库的开发场景，其打包出来的体积对比webpack来讲也会更小，在之前，这种工具栈一般都是这些项目的标配。

在vite出现之后，我们有了新的选择，Vite 原生可以支持 ESM 的代码或者 Typescript，也就意味着，如果我们我们即使对传统的项目进行重构迁移，这样的成本也不会太大，而且 Bundless的开发体验可以让你感受到飞一般的感觉，这也是vite引以为傲的核心竞争点之一，在2021年其出现后，很多知名组件库，例如element-plus、DevUI、Varlet 这些组件库都是基于Vite来构建完成的。

在使用之前，我们同样也要对其进行简单了解，明白使用它到底有何好处

• 效率高，编译快，运行速度极快，运行效率其实是因为Vite的原生特点，主要来自于 Bundless 机制 + Esbuild 高效编译器两个原因，我们在日常开发中，都会webpack漫长的编译时间所折磨过，这些时间主要来自于打包，而Vite则是基于浏览器对 esm 的原生支持的特性，直接解决掉了这个时间开销，同时对于代码的编译也采用了基于Go语言开发的Esbuild，其构建速度也得到了显著提升。
• 其二就是我们上面提到得，其原生支持ESM和TypeScript，以往得项目如果我们需要使用这两种场景，一般都需要babel编译器进行转移，而Vite则省去了这些步骤，可以直接进行开发。
• 其三，其拥有非常好得生态和专业团队得支持，目前已经拥有了非常多得插件可以供我们选择使用，同时也对Vue、React都支持良好，在专业团队得维护下，我们是可以放心使用得。
• 其次在之前，我们可能需要考虑开发服务器，文档得建设，测试工具，语法编辑器，代码质量，代码风格等等场景，会选用很多不同得工具栈，而有了Vite之后，我们就可以相对统一得选用了，比如如下对比：

	Element	Vite栈组件库
开发服务器	webpack-dev-server	Vite
文档建设	webpack + markdown	Vite-Press
测试工具	Jest	Vitest
语法编辑器	Babel	Vite(内置esbuild)
代码规范	Eslint	Eslint
代码风格	Prettier	Prettier

我们日常开发文档，在此之前，相对使用Vuepress得场景较多，在Vite出现之后便有了VitePress版本，可以很好地将 markdown 格式的文档转换为静态站点，同时，我们可以利用一些提供得插件配置，即可对我们开发得组件直接展示在文档当中。

同时也出现了基于Vite得测试框架Vitest，以前使用较多得是Jest，打开Vue的源码，我们可以发现其就是使用的Jest，而Vitest则是在基于保留Jest写法的同时，又可以利用Vite热更新的技术，使之不仅仅拥有了更高的测试效率外，其与Vite还具备共同配置的能力。

所以基于以上前提，本次的构建工具将有Vite来实现，最后我们还需要了解一下pnpm,上面提到，我们使用Monorepo架构目前的两种方案，本次我们选择后者，所以在使用前，也对其进行简单的了解。

什么是pnpm

首先，作为前端开发，我们日常中离不开的就是npm或者yarn或者cnpm等等，其实这些都是包管理工具，所以pnpm一样也是包管理工具，。它由 npm、yarn 衍生而来，但是却可以解决处理 npm和yarn 内部所存在的一些潜在的 bug，这样一来，使pnpm拥有了更高的性能，我们可与测试使用不同的包管理工具对项目依赖进行下载，可以发现其速度确实得到了显著提升，我们在想，不都是包管理工具么，到底有什么好，其实其拥有两个优秀的特征，1：磁盘空间利用非常高效、2：包安装速度极快，如果我们要使用它呢也非常简单：

npm i pnpm -g

当然具体的细节大家可与自行了解，本次我们不对这些工具栈做非常详细的介绍，因为我们使用它是因为其支持monorepo 。

那么其是如何来支持monorepo的呢？我们知道在此之前有一个lerna方案可以使用，像 lerna 这样一个 monorepo 管理工具，包括了很多的功能。但是很多功能我们其实并不需要，同时其配置也相对比较复杂，很多功能也都需要手动配置，反正就是很麻烦，所以，我们直接省区这个繁琐的步骤，使用pnpm来完成吧。

我们可以通过pnpm光速实现 monorepo，具体细节的实现我们放在编码环境，在此，如果你对其还不够了解，可以简单的去了解一下这个工具，目前在我的使用体验下，确实感受到了其高效性，确实非常好用。

好了我们已经了解了几个相对核心的工具了，接下来介绍几个相对来说比较日常的工具了，这些工具日常中大家也都有使用到，我们先对我们所需要的工具进行统一的讲解。

其他所需要了解的知识点

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

好了，本文我们梳理完我们所需要使用到的所有工具栈，以及我们要使用的技术栈，从下一篇开始，我们将进入从零开始的编码环境，在此之前，如果对上述知识点有完全不懂的地方，建议先进入其对应的官网进行简单的学习了解，以便于在后续项目中可以更加轻松的学习下去。

历史回顾