组件库实战-基建思路

文章总结

这篇文章围绕新组件库的基建思路展开，涵盖了从现状吐槽到具体工程化实践的全过程。核心内容包括：

• 👀 工程化现状吐槽：反映了原有项目管理混乱、构建速度慢、依赖不一致等问题。

• ⚙️ 技术选型：选择了 monorepo（管理多包的方式更统一），主框架是 Vue3 + TypeScript，兼具现代性与强类型保障。

• 🧱 支撑体系：覆盖了代码规范（如 ESLint + Prettier）、Git 工作流（如 Git Flow 或 trunk-based）、打包工具（如 Vite + Rollup）、测试（如 Vitest）、文档系统（如 VitePress/Storybook）等。

• 🛠️ 开发流程与分支管理：通过分支策略和 PR 审查机制来保障质量与协作效率。

• ❤️ 社区贡献与扩展：项目开放、欢迎新同学加入，是一个「为爱发电」的社区协作实践。

🤔 关联问题简答：

Vue3 为何被选用？

• 🌟 响应式系统更强大（Proxy 替代 defineProperty）

• 🔧 Composition API 更适合构建库，逻辑复用和类型推导更清晰

• 🌐 更适配未来生态（如 Nuxt 3、Vue Router 4、Pinia 等都基于 Vue3）

pnpm 有何不足？

• 🌀 项目间的隔离更强，但这也会导致：

  • 某些工具链（如老版本的 Webpack 插件）在 node_modules 查找依赖失败

  • 对 monorepo 初学者不够友好，调试和查错稍显复杂

• 💡不过总体而言，性能和一致性更好

测试库如何选择？

• 🔍 建议使用 Vitest：

  • 与 Vite 深度集成，速度快、类型好

  • 写法类似 Jest，上手简单

• 若需要更丰富的 DOM 测试，可结合 Testing Library 使用（如 @testing-library/vue）

工程化闲谈

2023年已经到来了，我最深的感觉就是 越来越卷 了，前几年大家都还在 卷功能，卷点子 。然后老牌工具被大伙卷得差不多了，在功能上已经没啥好卷的时候。大家就开始从 语言层面上卷（求求了能不能不卷了，我其实很想吐槽），类似于Rust、Go等编译型语言。全面拥抱工程链和编译速度，用二进制去追求极致的DX，类似于bun，esbuild、swc、tsup等。

这实在是对于一个刚入门的把工程化作为主方向的前端工程师来说，着实是不太友好的，这意味着你可能你刚学完 babel 的时候，babel(虽然它有很高的定制程度，但它比起esbuild和swc几乎是差了一倍或者以上的速度) 就被淘汰了，你刚会写 cli 的时候，发现大家都很挑剔，只用 Rust 或者 Go 的工具了，你白学了，以后的前端工程师可能就不知道还有 babel 这个东西存在了，你的投入产出就不是很成正比了。除非说你是真正意义上的，工程化底层玩家（因为对于转移，编译，各路工作流的思路来说大致相同，你需要的只是学习语言的时间）。

其实说到这也暴露了一个问题，为啥每一次工程化的迭代都是从国外开始~，国内其实有好多优秀的开源工作者但他们都是加入的国外的开源团队，人家pnpm的作者在乌克兰，一边外面战火连天一边写开源，我们就卖课卷钱搞培训要不就摆烂切图崽是把。

好了，闲话不多说了，步入正题，因为组件库是开源组件库，这篇文章也是顺手写给正在协作开发的小伙伴的，对于一些比较基础的东西就只会简单的提一下。

技术选型

类别	选型/工具
🏗 仓库模式	monorepo
🌐 框架与语言	Vue3, TypeScript
📦 Monorepo 支持	pnpm, turborepo, changesets
🧼 代码规范与限制	husky, stylelint, eslint, prettier, commitlint
🔁 工作流	前期：基于功能分支（常规开发流程）<br>后期：GitHub 工作流（bot + actions）
📦 打包工具	tsup, vite, tsc, gen-tsc-vue
🧪 测试库	vitest
📚 文档站点	vitepress
🛠️ 额外技能支持	IDE 支持、Shell 脚本工具（如 sh）

仓库模式的选择

其实这个没什么好说的，对于组件库来说，共用的基础依赖，包的相互调试，三方包的管理，monorepo 显然是无二选择，并且在各种新技术的支持下也能解决一些雪球越滚越大的问题。

再谈谈对现在项目的思考，我们平时都会面临一个问题，那就是越来越大的项目，而传统的singlerepo的单仓模式会越来越不适合滚雪球项目。可能有人会提到微前端，基座和子应用等一些方案，但这个方案还是会面临不停修改版本号发包的问题（不利于CI/CD）。而monorepo这种模式对于这个问题是一个很好的解决方案，即便是单包应用也应该使用monorepo，而这就是我前面指的随着技术发展的聚合。

框架和语言

typescript不用多说了，Vue3的选择是因为国内 V圈 力量大一些，react其实它庞大的社区支持和工程化支撑让我很心动，但实在是不好找人，属于是无奈之举了。

monorepo支持

1.老牌工具npm：

四个字形容的话就是：尾大不掉。

其实它挺尴尬的，一个是node不带它玩了，一个是竞品个个猛如虎。

但还好的是现在前端圈门槛极低，所以实际上前端圈处于初级领域的开发者还有很多，还有就是一些老项目，那么对于这些情况来看的话用 npm 也是正确的选择，毕竟也不是不能用，也没特别差，也不需要追求极致。

2.yarn：

作为一个全球使用量第一的包管理工具，它在机制上、速度上、易用性上都吊打了npm,包括后面 yarn + lerna的联动， 以及v2的依赖压缩，v3的软连接。其实也还算可以了。

3.pnpm：

pnpm + changesets VS yarn + lerna。

pnpm + changesets的优势主要在这些方面：

1、严格的依赖隔离。2、更加的简洁和效率。3、软连接（虽然yarn3也有，但没Pnpm用得这么舒服）。4、速度优势。5、发包更简洁内置CHANGELOG。6、github bot和actions支持。

但说句中肯一点的话，因为现代计算机的性能都十分过剩，对于什么软链接也好，隐式依赖、幽灵依赖也好，隔离也好，为了节省时间和空间，其实都是虚的，想了解的可以去看看文章和github讲得也挺多了上面这些问题。

但 pnpm 天生的优势让他可以很简单的，又有效率的支持workspace monorepo，对新手十分友好。特别是在多个项目之间共享代码时，无需单独抽离代码发包，再加上它也确实更快，占用的体积也更小，所以pnpm是现代monorepo的不二选择。

4.turborepo

turborepo 是 vercel 针对 monorepo 拓扑依赖关系的并发构建工具。

Turborepo：vercel / turborepo

就是 turbo 这个工具是 go 编写的，因为收集依赖关系进行 io 还有识别文件 hash 保存 cache 这些用 go 会更快（编译并发型语言的优势惹）。

它是用来解决，在 monorepo 中错综复杂的依赖关系和构建逻辑的解决方案。链接放在上面了，对于初入工程化的同学来说，你只要知道第一它很快，第二它会帮你收集最优的依赖构建方案，第三它是有缓存的并且有远程缓存。

落到实处，这从根本上解决了monorepo项目的各种构建打包问题。以组件库为例：Pr预览场景的编译。各种错综的依赖打包，组件打包，生成dts，类型检查，断言测试，字体库打包，docs打包等等等。

代码限制

对于一个开源库，大伙又是来自天南地北的小伙伴。团队协作人越来越多的时候，这时候应该是限制>约定。简单的说就是，能加的限制都加上，这对于代码的规范、个人的提升都是很重要的。

eslint+pritter 没啥好说的语法检测+代码格式化

csslint 遵循bem规范

git+husky+commitlint 对于提交的格式进行限制

review 提交代码至少由2人或以上分别check。

workflow工作流

下一篇，讲工具实战的时候细说。

打包工具

这几年的打包工具太多了，而且都很优秀，真是挑花了眼，比如：unbuild tsup esbuild snowbuild(文档特别好!但怕踩坑) vite rollup webpack glup wmr turbopack tsc等等等。

我们得从几个方面去考虑：

• 上手难度。

• 对vue的支持度。

• 构建速度。

• 维护力度社区支持度。

vite: 毋庸置疑我们可以先挑出一个vite，虽然它在库模式下的打包不尽人意以及社区插件质量一般。但它对vue的支持度，开发服务器优势的构建优势，和后续vitest，还有上手难度都是值得一用的。

tsup：对于一些工具包，语言包，打包文件等它真的是一个很好的选择（esbuild内核）。（如果它对vue的支持力度有react这么高就好了）。

tsc和gen-tsc-vue: 它在生成d.ts描述文件上对比一些插件(transform写的那些)真的很快，且文档齐全，社区方案众多。

测试库和文档站点

vitepress和vitest,相似的打包和相似的配置项，在很大程度上形成了一个闭环，降低我们的开发难度。

组件库整体思路

流程：

分支部分:

除了上面提到的docs文档站点，组件库，测试库，打包工具、代码限制这些基础之外，还有些部分。

模块	说明
🚀 脚手架	初期：创建组件模版与 docs 模版，便于开发专注<br>后期：整合 turborepo，统一打包、测试、检查等命令
🎨 样式系统	组件库需要统一、稳定、可扩展的样式体系作为支撑
🔠 类型系统	与样式系统一样重要，确保类型安全与良好 DX，后续由其他成员补充
🤖 Git Bot & Actions	引入 GitHub Bot 与 GitHub Actions 实现提交规范与自动化流程，减轻维护与发布压力
🧑💻 IDE 支持	目前以 VSCode 为主，提供语法提示与智能补全功能
🌍 语言库	可选项，主要用于提升国际化能力；但由于项目为“为爱发电”，非 KPI 驱动，暂不强制要求

招人啦

组件库的宗旨是：为摸鱼而生！

目的：主要是一方面在为我们开发减负的同时，也能真正意义上的提升自己水平，这里有这几个方向的内容：工程化，Vue3组件设计开发，样式体操，类型体操，git, 团队协作，CI/CD，IDE

然后组件库因为刚刚起步，样式系统和类型系统小伙伴正在开发中，还有很多版块等待开发！

欢迎加入群聊，我们一起讨论一些更有趣的技术、商业、闲聊。