大家好，我是皮汤。最近程序员巴士学习交流群里有小伙伴想要了解一下如何看源码，正好最近有一点心得感悟，之前也写过一篇实际跑通 NaiveUI 源码的文章：尤大都推荐的组件库是如何开发出来的？ 源码的经验，来给大家分享一下。

心理认知要到位

首先要认识到，看源码是一个开始比较枯燥、同时时间跨度相对比较长的一个过程。所以看源码的第一步是找到自己想要了解领域、或者自己所在业务领域高度相关的项目，并且在这个领域比较出名，且维护活跃。

打个比方，皮汤我因为是一名前端，而前端这个领域有很多新兴的内容，如 Unbundled 方案 Vite，新兴框架 Svelte，新汇编语言 WebAssembly，CSS 工程化方案 TailwindCSS，组件库如抖音很火的开源库 Semi Design、或者社区比较火的 Vue3 组件库 NaiveUI 等。

而皮汤我一直对组件库、CSS 方向比较痴迷，且是组内最近负责前端工程化 CSS 方面基建的负责人之一，所以让我去研究一个组件库的源码，如 NaiveUI，那么我是很有兴趣、动力和理由的，而这也是驱动你啃下一个源码的核心驱动力之一。

理解高潮 MVP

其次我们看源码要有一定的技巧，复杂如 React，可以算作一个简单的操作系统了，如果你上来通过比较简单粗暴的从代码入口开始，一路打断点了解源码，那你再怎么坚持也会想吐的。

那这里的技巧是什么呢？就像我们互联网创业一样，如果你有一个大而全的点子，但是你的第一步肯定不是找一个空旷的屋子，备好半年的粮食，准备几台电脑，然后高强度开发几个月，然后祈求一问世就惊艳世人。一个是这种情况非常少见，二个是你也得有坚持几个月的资本和耐心。

而在创业领域一个比较知名且流传深远的技巧就是 MVP，即最小可行性产品，你需要先做出一个非常小的，刚好能够使用以及能够测试你想法的产品，然后快速推向市场，接收用户反馈，接着跟进用户反馈，不断迭代产品，满足用户需求，直至达到 PMF（产品与市场匹配），这个时候你基本上就可以找投资，进行规模化，然后就是融资、去纳斯达克敲钟。

所以对应到我们看源码这个领域，第二个需要注意的，就是你需要找到一个开源项目能跑起来的最小 MVP，去除其他繁杂的依赖，最最核心的流程与机制。这个能够帮助你理解项目核心的 MVP，我称之为 高潮 MVP – 即如果你能够跑通一个项目这样的 MVP，那么你内心会异常幸福，感觉自己成就慢慢，兴奋达到了高潮，而接下来其他内容、分支基本上就是复用这套 MVP，往上面添砖加瓦，补齐一些兼容细节等。

开始之前

那么对于 NaiveUI 来说，它的高潮 MVP 是什么呢？

我们首先打开它的官网：

点开开始使用：

作为一个组件库来说，它一般需要谈论自己的价值观、设计原则、定制方式，ICON 图标相关的内容，但是这对于你搞懂这份源码其实没有多大帮助，所以需要略去这些干扰项。

让我们再来看看它的源码仓库：

确保这个库使用何种语言编写，这样你在看源码之前可以先衡量你当前的知识储备是否能够支撑你看懂这份源码，当然如果你没有对应的支持储备，但是又坚持想要看这份源码，那么你首先应该考虑根据它使用的语言，提前进行语言学习储备。

看透本质

让我们回到 NaiveUI 的官网：

可以看到，对于一个 “组件库” 来说，实际上最最基础的其实就是 “组件”，而组成 “组件” 的背后则需要一系列更加基础的元素，如颜色、间距、边框、背景、字体等。

那么我们的目标是不是很明确了呢？把一个 “按钮” 组件拿下，理解能够完整使用到这样一个按钮背后所需要的所有必须的流程、知识、细节，那么针对其他的组件，基本上 90 % 的逻辑可以复用，只需要理解剩余 10% 特定功能需求就可以搞懂。

类似下面这张冰山图：

冰山之下就属于那 90%，我们基于一个看似简单的 “按钮” 组件，来梳理整个组件库的核心流程，就可以帮助我们快速、精准的搞懂整份源码，所以我们的高潮 MVP 就是搞懂一个 “按钮” 组件的全流程。

了解上下文

理解我们的高潮 MVP 目标是什么了之后，接下来就是带着这个目标先详细读一下文档中关于 Button 的所有相关说明，可以看到这个按钮包含如下内容：

通过右侧的目录，了解到一个按钮首先会有基础内容，包含 default、primary、info、success、warning 和 error 这几类，然后需要处理：

• 边框相关：虚线
• 尺寸相关：尺寸、行政
• 颜色：自定义颜色
• 状态：文本、禁用、加载中
• 事件

上述表明了这个 Button 可以达到的效果，可以完成的操作，了解之后，接着可以了解按钮相关的使用 API，通过 API 以及可以达到的效果，我们大致可以理解这个按钮接收的输入和输出有哪些。

一个一个使用 Button 的例子长什么样子：

<template>

  <n-space>

    <n-button>Default</n-button>

    <n-button type="primary">Primary</n-button>

    <n-button type="info">Info</n-button>

    <n-button type="success">Success</n-button>

    <n-button type="warning">Warning</n-button>

    <n-button type="error">Error</n-button>

  </n-space>

</template>

了解如何开启项目

通常开源项目比较方便的一点是它会有详细的文档，同时它非常渴望有贡献者加入，所以会有完善的 贡献指南，比如 NaiveUI 的贡献指南如下：

通过贡献指南，你能够了解如何安装依赖、处理一些启动项目的问题，能够把项目跑起来进行调试，这通常是你了解整个代码运行过程的初次体验。

理解目标项目的项目结构

通常你到这个步骤时，你应该需要知道如下内容：

• 你已经理解了你的目标，高潮 MVP 是什么
• 你理解了你目标内容作为一个功能特性，它的输入和输出是什么
• 你理解此项目的技术栈是什么，如何把项目跑起来

对应到 NaiveUI 我们的这三点分别如下：

• 高潮 MVP：跑通一个 Button 并能够使用，保有和现有 Button 一样的特性，接收一样的输入，产生一样的输出
• Button 包含边框、尺寸、颜色、状态、事件等相关的内容，输入这些参数，产出对应条件下的输出
• 项目的技术栈是 Vue3、TypeScript，构建工具是 Vite，同时使用了 CSS BEM 框架 CSS Render，同时包管理工具使用 pnpm

理解这三点之后，接下来我们就需要对照着源码来理解一下整份文件目录，了解各个目录之前的依赖关系，见下图。

我们可以先了解一下大致每个文件夹是干什么的：

• src：这个是主要放组件库相关的组件代码，以及导出一些国际化、样式、主题定制相关的内容，一般是一个开源项目的核心开发目录
• scripts：一些运行代码、构建、发版相关的脚本逻辑
• theme ：则为 NaiveUI 内置的默认主题，类似这种组件库一般都允许用户自定义主题，整个 NaiveUI 各个组件在使用各种 UI 属性时都是遵从这套主题进行设置的，也就是可以修改 theme 里面的内容，或者自己完全自定义一套主题
• .github 、.husky 等都是一些配置，无需过多关注，可以直接加入到你的 MVP 模板工程里
• playground 是用于此时代码在各种环境下运行的支持代码，如 SSR 等
• demo 则是引入 src 相关内容用于展示组件实际效果的网站例子，实际上对于 NaiveUI 也就是我们之前看到的文档官网
• 其他的如 build 、design-notes 等是构建产物，或者一些主题设计的笔记等，基本上不属于本次源码需要阅读的部门，看兴趣的同学可以看看

然后就是一些用于各种工程化配置的文件如：

• .prettierrc ：Prettier 相关
• .gitignore ：Git 相关
• .eslintrc.js ：ESLint 相关
• babel.config.js ：Babel 相关
• jest.config.js ：Jest 测试相关
• postcss.config.js ：处理 CSS 相关
• tsconfig.xx.json 处理 TypeScript 相关
• vite.config.js ：Vite 构建工具相关的配置

以及一些和项目强相关，用于了解整个想法发展上下文的 CHANGELOG.xx.md ，还有我们之前提到的用于跑通代码的 CONTRIBUTING 贡献指南。

有点看懵了。