必不可少的UI组件二——组件库开发的基础知识(工程化篇)

组件库工程化概述

在 必不可少的UI组件——组件库开发的基础知识(Vue篇) 中，我们介绍了一些封装 Vue 组件的过程中高频使用到的框架技巧，但是，这并不足以支持我们实现完善的组件库。

建设一个成熟的组件库就像盖一幢大楼，工程化基础就如同脚手架一般，虽然不是组件库核心、必备的部分，但没有它们，整个施工过程就会充满危险、处处收到掣肘。

构建组件库的工程基础需要的工具又广又杂。考虑一个成熟的组件库，它的工程化应当有以下需求：

1. 包管理： 你的每个组件都需要发布到 npm 仓库，我们要熟悉 npm 包管理的基础 package.json，熟练运用一款包管理工具(npm/yarn/pnpm)。
2. 文件组织： 一个组件库由多个组件构成，monorepo 模式提供了在一个代码仓中集中管理多个零散模块的优秀实践，我们需要掌握这种架构。
3. 构建： 组件库应当通过构建生成尽可能多样化的产物(cjs、esm、browser、d.ts、样式)，满足用户在各个场景下的使用。
4. 开发环境： 为了快速调试组件库，我们需要有一个开发服务器，并且要在多个组件相互依赖的前提下，解决热更新问题。
5. 文档： 为了方便用户上手使用组件库，我们需要搭建一个文档对组件进行展示和说明。
6. 测试： 为了确保代码的可靠性，我们需要集成测试方案，比如单元测试和端到端测试。
7. 代码规范： 如果组件库的开发有他人协作，为了日后的可维护性，需要引入代码规范工具确保源码风格统一。
8. 发布： 每当组件发布新版本时，我们需要一套发布流程，能够完成更新 semver 版本号、git 仓打 tag、生成版本更新记录 CHANGELOG 等操作。
9. 持续集成： 最后，还需要有 CI / CD 流水线，使代码门禁、文档部署、测试流程、发布流程都趋于自动化，降低维护者和贡献者的心智负担。

本章节主要给大家介绍组件库开发工程化方面的基础知识，先从最基础的包管理和文件组织入手，理清下面两个问题。而后续的构建、测试、发布等流程将在未来实践性更强的篇章中分享。

• 组件库由多个组件包构成，一个“包”都有哪些基本属性？
• 这么多组件包，为什么需要、以及如何使用 monorepo 架构对它们进行集中的组织管理？

组件库与 monorepo

组件库工程往往会拆分出许多子模块：

• 以组件为单位划分子模块，可以满足用户单独安装、更新某个组件的需求，提供更加轻量、灵活的产物。
• 将组件库的公用方法抽离为子模块，可以积累工程能力，有利于组件的后续迭代与维护。

我们可以先来参考 tinyVue 是如何进行拆分的：

• renderless - 为了使组件的视图与逻辑分离，tinyVue 在这个模块实现组件的逻辑。
• theme - 实现组件的主题与样式。
• vue - 组件的主体实现，将 renderless 中的逻辑、theme 中的样式与