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

本文为稀土技能社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！

好了，在进入正式编码之前，咱们需求先来讲讲本次开发组件库所需求运用到的一切技能栈，以便于咱们在学习之前能够对咱们将要运用的东西栈有所了解。

本次的技能栈会对标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之后，咱们就能够相对一致得选用了，比方如下比照：

咱们日常开发文档，在此之前，相对运用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东西进步研发体会

好了，本文咱们整理完咱们所需求运用到的一切东西栈，以及咱们要运用的技能栈，从下一篇开端，咱们将进入从零开端的编码环境，在此之前，假如对上述常识点有完全不明白的地方，主张先进入其对应的官网进行简略的学习了解，以便于在后续项目中能够愈加轻松的学习下去。

前史回忆

开篇：探索前端工程化、从零到一打造一个前端组件库！ –