前言

本来打算春节的时候做的，然而怠惰了。。。年后又因为开始实习换了新环境加上惰性使然，一拖再拖，于是就拖了两个月才新建文件夹(

技术选型与调研

框架 Vue

之前一直打算做React的，个人感觉相对来说React的组件化思维会更强一些？也可能是太久没用Vue的错觉。不过React的生态已经非常繁荣了，本着面向萌新的想法应该也是使用Vue多一点，也顺着捡一捡并没有实战过大型项目的Vue3，最后还是选择了使用Vue作为框架。

代码仓库管理方式 Monorepo

这个无需多言了，组件库项目的不二选择。

题外话：目前接触公司项目的一个多月看来，许多业务仓库也会使用或正在迁移使用monorepo，如果说组件库使用它是因为在多模块方面的优势，大型业务项目使用则可能更贴近工程化思想甚至一些团队文化方面的东西，以后有更深的理解可能会单独写一篇思考。

构建系统 Turborepo

yarn 和 pnpm 作为包管理工具，他们有一块衍生功能是 packages 的管理能力，成本比较低，非常容易在既有的 repo 上用起来。不过 yarn 和 pnpm 不是专业做 monorepo 工具的，提供的功能比较有限，所以选用了专门的构建方式。

选型方面的主要竞品有 Rx 的 Lerna、微软的 Rush.js等。Turborepo 目前是 Vercel 维护的商业开源项目，由于出来的晚，可以说是集成了多个竞品的优势。官方致敬开源库列表其实这些构建方式都有构建缓存这个相较于包管理工具原生开发最重要的功能，选用turbo主要还是~~挑一个吹的最好的~~看好它的高速发展。

本地调试 Storybook

单元测试 Vitest

打包工具 Vite

打包工具主要是在 Rspack 和 Vite 之间选择，看了一些测试数据后感觉Rspack还是更适合需要频繁热更新的业务项目一点，做库这种还是 rollup 及其上层封装的 vite 更合适。

CSS样式 Import CSS

Import css 方式（scss / less）进行样式基础开发
基于 css variable 实现主题定制方案
- 预设一套基于 css variable 的全局主题变量自定义 UI 主题
- 针对单个组件预设一套 css variable 来自定义组件 UI
组件 css class 前缀

每个组件的样式文件中定义自己的前缀

@class-prefix-button: ~'adm-button';

.@{class-prefix-button} {
    xxx
}

各方案对比：

Css module
- 缺点：
  - 会导致 class 经常变化，外部无法覆盖
Tailwindcss
- 缺点
  - 可能会和业务代码样式冲突
  - 不利于按需加载（Tailwindcss 会根据用户写的 class 生成一份 css 文件全局加载）
Js 中 import css（antd-mobile）
- 优点
  - 引用组件时不用额外引入 css 文件
- 缺点
  - Js 和 css 耦合，导致需要额外打包步骤
Css 和 js 分离（okee、arco）
- 优点
  - 打包配置方便，可以直接使用 babel 编译 ts
  - 允许用户通过 less/scss 变量覆盖的方式覆盖组件样式
- 缺点
  - 在引入组件时需要额外引入样式文件
Css in js（现在的 antd）
- 优点
  - 样式受 js 控制，灵活
- 缺点
  - Js 和 css 耦合加深
  - 运行时消耗增加：频繁插入CSS规则迫使浏览器做很多额外的工作
  - 原有组件迁移成本高

组件库开发历程

前言