前言

掘金小伙伴们大家好sketch文件怎么降级，我是 Vue3 移动端组件库 UI 的作者。时间过得真快，转眼间已经是 2023 年 10 月了。上一次整理分享组件库的架构还是在两年前刚开源的时候。感谢社区同学的帮助，两年过去了，它已经有了 4000+ star。

两年前笔者曾写过一篇《如何从 0 到 1 开发一个开源组件库》的文章，希望能够分享和记录组件库从 0 到 1 的经验和思考，也希望对组件库感兴趣的社区少走一些弯路。然而时至今日，前端生态已经发生了翻天覆地的变化，自己也在不断学习和追赶，也取得了长足的进步。在这篇文章中，笔者将以一个组件库作者的角度，分享当下组件库在架构和思路上的变化。

Pnpm 解包架构

这样做的好处是可以将项目中公用的部分抽取成单独的包进行单独发布和管理，免除了很多依赖的维护压力。有利于组件库的生态建设。我们在项目初期就采用了这种架构，采用的是yarn+lerna的方式。后来pnpm流行起来，我们很快切换到了pnpm。pnpm性能更好，更节省磁盘空间，对依赖的处理也更好，有效解决了ghost依赖对整体项目的影响。

当前解包结构如下...

|-- packages
  |-- varlet-cli 组件库命令行工具，管理整个组件库的生命周期
  |-- varlet-eslint-config 组件库的 eslint 规则
  |-- varlet-icons 组件库图标库打包工具
  |-- varlet-shared 共享的通用工具
  |-- varlet-touch-emulator 桌面端适配器
  |-- varlet-ui 组件库本体
  |-- varlet-ui-playground 组件库的演练场，在线编辑工具
  |-- varlet-use 组件库用到的 composition api
  |-- varlet-vite-plugins 组件库依赖的 vite 插件
  |-- varlet-vscode-extension 为了提高开发体验的 vscode 插件

设计系统

设计体系和设计资源对于组件库来说非常重要，也是设计师和软件开发者沟通的桥梁。没有设计体系，我们的组件就会失去标准和原则，会失去一致性，最终的视觉效果也会大打折扣。没有设计资源，设计师就很难配合软件开发者有效制作软件设计稿，组件库也很难真正落地到产品中。

条件允许的情况下，建议先完成设计稿再实施组件。我们最初是先完成组件功能，再补充设计资源，损失很大。后期又花费精力分别修改所有组件的视觉效果，费时费力，还产生了一些破坏性的变化，实在不值得。

而且学生们也不需要害怕画设计图，像Figma这样的工具很符合我们做前端开发的惯性思维，而且非常好用。

image.png组件书写风格 SFC 或 TSX

我们采用了 SFC 与 TSX 互补使用的组件编写风格，主要使用 SFC 是因为 Vue 的 SFC 编译器提供了很多编译时优化和运行时更佳的性能。而使用 TSX 则是为了弥补 SFC 的一些开发短板（比如对于 VNode 的操作，SFC 就不如 TSX 方便）sketch文件怎么降级，两者各取所长。

开发环境拥抱Vite生态

我们的开发环境已经迁移到 Vite，项目所需的 Vite 插件也已经分离成一个包。Vite 非常优秀，功能强大，既可以作为开发服务器，又可以作为库编译器，是自建组件库文档的最佳选择。同时我们也非常期待 Vite 之后可能出现的基于 Rust 的构建工具。总之，Vite 是一个充满可能性的技术，值得拥抱它。

图标库

我们采用的方案是传统的字体图标方案，使用起来非常方便，我们使用-icons将svg图片集打包成字体文件和css，以供组件库使用。

单元测试

我们的单元测试工具已经从 jest 迁移到 。jest 一个众所周知的问题是配置文件太多，需要单独配置编译相关的东西。其实 Vite 已经帮我们处理好了这些东西。 最大的好处就是和 Vite 共享配置，可以减少很多依赖和配置维护负担。

测试文件的执行速度也得到了很大的提升，尤其是在 Mac M1 上。不过在单核 CPU 上显然没有那么快，在 CI 上的速度和 jest 差不多，还是值得迁移到 。

image.png基于原生语言的JS/TS编译器

随着基于原生语言的 JS/TS 编译器的流行，社区中也涌现出了很多基于原生语言编译器的上游工具供我们替换一些老旧的工具。针对浏览器场景下 TS 库的编译器，我们选择使用 tsup 来替换官方的编译器 tsc。tsup 基于 ，编译速度是 tsc 的数倍，开箱即用。

Node 场景我们推荐使用 ts 库，它在开发模式下提供了运行时，可以避免重复编译 watch 文件的性能开销，也支持生产环境的搭建。我们最后没有用它，因为我们不希望项目中的编译器太复杂，而且 Node 场景的 ts 库对我们来说也不多，最终选择了 tsup 来编译除组件编译之外所有场景的库。

我们通过自研的编译器来编译组件，自研编译器的好处是编译过程足够可控和直接，并且轻量级。编译核心也从 babel 过渡到了 babel+混合编译，使用 babel 来处理 vue jsx 语法，然后再进行编译和语法降级，大大加快了编译速度。

image.png 编译结果

为了满足不同场景的需求，我们一般需要这几个产品：esm、cjs、umd。esm一般用在构建工具的场景，cjs一般用在老node版本的服务端渲染、单元测试的场景，umd一般用在浏览器cdn引入的场景。我们使用自研的组件编译器，按照目录结构输出esm模块。按照目录结构输出对组件的按需引入更加友好，然后通过Vite的库编译模式输出cjs、umd的打包文件。

文档部署

本着能不花钱就不花钱的原则，国内首选Gitee Pages服务，国外首选Gitee Pages服务。部署两个站点有利于国内外用户的访问体验。还有一个好处就是可以通过APP直接集成到CI中，每个PR都可以自动部署，并且得到一个可访问的地址，这样可以帮助你清晰的预览和了解每次提交对应的组件效果，毕竟我们是做组件库，视觉效果的审核极其重要。

图片.png

image.png钻地

每个组件库都需要一个在线编辑工具，方便用户反馈、重现 Bug 或者提出问题。我们修改了 Vue 官方代码，搭建了一个。具体实现细节，可以查看这篇文章 Vue3 组件在线交互式解释器，或者查看源码。也可以使用一些成熟的服务，比如，但它们都不是那么轻量，在线搭建也比较耗时，国内网络不好的同学很难访问。

图像.插件

组件库不仅要满足用户体验，还要尽可能满足开发者体验。插件是一个很好的起点。我们尝试开发了一个插件。功能如下

图片.png

图片.png

顺便说一下，我们还做了一个主题

图片.png

该插件可以在插件市场中找到

image.png感谢您阅读本文

我不知道自己写得怎么样，可能帮不了你什么，但希望能给你一些启发。再次感谢社区对组件库的支持，欢迎大家issue pr star。

仓库地址：

如有侵权请联系删除！