1. 解读前的准备

粗略阅读了川哥的文章之后，感觉这期跟上一期不一样。上一期主要学习如何实现某个功能，而这一期主要是学习 Vue3 源码中的工具函数，以及 Vue3 源码的一些调试技巧。虽然看起来偏基础，但我觉得很考验一个程序员的基本功和耐心。

学习目标：
1）调试源码之打包构建项目代码，生成 sourcemap 调试源码；
2）学习源码中的工具函数；
目标：跟着川哥的文章走完一遍调试的流程，动手敲工具函数，对外输出记录文档。

资源准备：
Vue3 源码地址：[https://github.com/vuejs/vue-next](https://github.com/vuejs/vue-next)

2. 源码调试

2.1 阅读开源项目的 README.md 和贡献指南 contributing.md

我觉得这两个文件对想阅读源码的开发者来说十分重要。README.md 描述的是项目的基本信息，它可以快速了解这个项目的全貌。贡献指南 contributing.md 会包含如何参与项目开发，项目打包/运行命令，项目目录结构等等，它能帮助你更好地调试/参与开发源码。在 contributing.md 中我看到了一些比较感兴趣的知识点，比如打包构建格式/配置，包依赖处理，不过这次主要是阅读工具函数，所以后续再抽时间进行有关组件库的学习。

2.2 打包构建项目代码

安装完依赖，直接运行yarn build就可以打包 Vue3 的项目代码了，打包的产物如下（以 shared 模块为例）：
image.png
这里的 cjs，esm 是 JS 里用来实现【模块化】的不同规则，JS 的模块化标准还有 amd，umd，iife。

  • CJS，CommonJS，只能在 NodeJS 上运行，使用 require(“module”) 读取并加载模块，不支持浏览器。
  • ESM，ECMAScript Module，现在使用的模块方案，使用 import export 来管理依赖，浏览器直接通过