这篇文章是关于新组件库实战的基建思路，包括工程化现状吐槽，技术选型如仓库模式选 monorepo、框架语言用 Vue3 和 typescript 等，还介绍了各方面支持、代码限制、工作流、打包工具、测试库和文档站点等，阐述了组件库整体思路如流程和分支部分，最后提到组件库招人，旨在提升水平，为爱发电。
关联问题: Vue3为何被选用？ pnpm有何不足？ 测试库如何选择？
AI智能总结首次生成速度较慢, 请耐心等待
工程化闲谈
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, prittier, commitlint,
workflow工作流：前期基于功能分支（平常应该是大伙工作中用得比较多的）的工作流 => 中后期github工作流（也就是开源那一套）github bot + github actions
打包工具：tsup , vite, tsc, gen-tsc-vue
测试库： vitest
文档站点： vitepress
额外技能：IDE支持、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等等等。
我们得从几个方面去考虑：1、上手难度。2、对vue的支持度。3、构建速度。4、维护力度社区支持度。
vite: 毋庸置疑我们可以先挑出一个vite，虽然它在库模式下的打包不尽人意以及社区插件质量一般。但它对vue的支持度，开发服务器优势的构建优势，和后续vitest，还有上手难度都是值得一用的。
tsup：对于一些工具包，语言包，打包文件等它真的是一个很好的选择（esbuild内核）。（如果它对vue的支持力度有react这么高就好了）。
tsc和gen-tsc-vue: 它在生成d.ts描述文件上对比一些插件(transform写的那些)真的很快，且文档齐全，社区方案众多。
测试库和文档站点
vitepress和vitest,相似的打包和相似的配置项，在很大程度上形成了一个闭环，降低我们的开发难度。
组件库整体思路
流程：
评估功能与影响 -> 脚手架生成组件和docs文档 -> 开发组件 -> play广场调试单个部分 -> vitest单测 -> 写文档 -> 打组件库包和单包 -> 提PR 通知引用你组件的人-> 代码review or pk -> 合并代码更变版本 -> 发布文档站点、单组件、组件库
分支部分:
除了上面提到的docs文档站点，组件库，测试库，打包工具、代码限制这些基础之外，还有些部分。
1、脚手架
对于项目初期来说，脚手架的工作就是，创建组件模版和docs模版，让我们的小伙伴可以只关注组件的开发。而后续来说因为是通过turborepo来实现自动化的构建流程，那么打包命令，辅助命令，测试命令，检查命令等应该都在脚手架完成。
2、样式系统
对于一个组件库来说，统一的样式是极其关键的，所以需要一个庞大的样式系统去支撑。
3、类型系统
与样式系统同理，但因为类型系统不是我的强项后面交给小伙伴们去补充。
4、gitbot gitaction提交规范
这是后续提入计划的一个部分，也是必要的一个部分，这极大的减轻了审查项目和发布的压力.
5、IDE支持
暂定为VSCODE的语法提示补全支持。
6、语言库
备选项把，因为这个开源组件库的本质是为了大家学习和自己能力的提升，并不是作为一个KPI项目，就只是一个纯纯为爱发电的东西。
招人啦
组件库的宗旨是：为摸鱼而生！
目的：主要是一方面在为我们开发减负的同时，也能真正意义上的提升自己水平，这里有这几个方向的内容：工程化，Vue3组件设计开发，样式体操，类型体操，git, 团队协作，CI/CD，IDE
然后组件库因为刚刚起步，样式系统和类型系统小伙伴正在开发中，还有很多版块等待开发！
欢迎小伙伴们的加入，积极性强的，想锻炼自己的小伙伴,可以私聊我，现在已经有一部分小伙伴啦，来就一定能学到东西，不是KPI项目也不是什么广告也没有商业性质，仅仅只是为爱发电的一群人罢了！