????1. 前言

大家好，我是若川。我傾力持續(xù)組織了一年多源碼共讀，感興趣的可以加我微信 lxchuan12 參與。另外，想學源碼，極力推薦關(guān)注我寫的專欄《學習源碼整體架構(gòu)系列》，目前是掘金關(guān)注人數(shù)（4.7k+人）第一的專欄，寫有20余篇源碼文章。

2. 看開源項目學習是怎樣的步驟？

看一個開源倉庫，第一步一般是看 README.md 和 contributing.md 貢獻指南文檔。

README.md 中一般有提到貢獻指南文檔的鏈接的。貢獻指南文檔就是為了讓別人參與項目貢獻。

而貢獻指南寫了很多關(guān)于參與項目開發(fā)的信息。比如怎么跑起來，項目目錄結(jié)構(gòu)是怎樣的。怎么投入開發(fā)，需要哪些知識儲備等。

第二步的克隆下來。按照貢獻指南文檔，把項目跑起來。

3. 如何調(diào)試 vue3 源碼

我們這次來學調(diào)試 vue3 源碼，看 vue3 源碼^[1]倉庫 contributing.md^[2]。

contributing.md 部分內(nèi)容

Development Setup

You will need Node.js^[3]version 16+, and PNPM^[4]version 7+.

We also recommend installing ni^[5] to help switching between repos using different package managers. ni also provides the handy nr command which running npm scripts easier.

After cloning the repo, run:

$?pnpm?i?#?install?the?dependencies?of?the?project

關(guān)于上方提到的 ni，我曾經(jīng)寫過源碼文章，可供參考。

尤雨溪推薦神器 ni ，能替代 npm/yarn/pnpm ？簡單好用！源碼揭秘！

從貢獻指南中，我們可以得知一些信息，那么先來克隆項目安裝依賴。

git?clone?https://github.com/vuejs/core.git
cd?core
#?安裝依賴
pnpm?i

4. 使用 vitest vscode 擴展的調(diào)試方式

安裝vitest vscode 擴展鏈接^[6]、vitest vscode 擴展 github^[7]

安裝vitest-runner vscode 擴展鏈接^[8]、vitest-runner vscode 擴展 github^[9]

//?packages/vue/__tests__/index.spec.ts
import?{?vi?}?from?'vitest'
import?{?EMPTY_ARR?}?from?'@vue/shared'
import?{?createApp,?ref,?nextTick,?reactive?}?from?'../src'

describe('compiler?+?runtime?integration',?()?=>?{
??it('should?support?runtime?template?compilation',?()?=>?{
????const?container?=?document.createElement('div')
????const?App?=?{
??????template:?`{{?count?}}`,
??????data()?{
????????return?{
??????????count:?0
????????}
??????}
????}
?//?可以按住?alt?+?鼠標左鍵點擊?跳轉(zhuǎn)到函數(shù)，提前斷點好想斷點的地方
????createApp(App).mount(container)
????expect(container.innerHTML).toBe(`0`)
??})
??//?省略若干代碼
}

如下圖 gif 圖所示，就是調(diào)試 vue 源碼了。

關(guān)于 gif 圖中頂部各個按鈕的作用，我曾經(jīng)寫過一篇文章新手向：前端程序員必學基本技能——調(diào)試JS代碼

通過開源項目的測試用例調(diào)試源碼，它的優(yōu)點在于不用打包、更接近源碼，測試覆蓋率高的開源項目，可以只針對某項功能做針對性調(diào)試，看測試用例的過程中也能直接學會使用。而這種調(diào)試方式，可能是大部分人從未使用過的調(diào)試源碼方式，因為大多數(shù)人可能沒學過測試框架。

Vue 源碼的測試用例現(xiàn)在改成了 Vitest^[10]。

同理可得，如果開源項目是使用 Jest 測試框架，可以安裝 `Jest`^[11]、`Jest Runner`^[12]vscode 插件。

5. 通過生成 sourcemap 調(diào)試

5.1 如何生成 sourcemap

貢獻指南的文檔 contributing.md^[13] 中有寫：

Build with Source Maps

Use the --sourcemap or -s flag to build with source maps. Note this will make the build much slower.

pnpm?run?build?-s

執(zhí)行后，所有的都生成了 sourcemap 文件，如下圖所示。

通過 sourcemap 文件，可以找到原始文件信息。

我們可以在根目錄下的 package.json 中，看到有一個啟動服務(wù)的命令。

{
??"private":?true,
??"version":?"3.3.0-alpha.4",
??"packageManager":?"pnpm@7.26.0",
??"type":?"module",
??"scripts":?{
????"serve":?"serve",
??},
}

這時再在命令行終端，執(zhí)行這條命令，啟動服務(wù)。

pnpm?run?serve

瀏覽器打開 http://localhost:5000 可以找到相應(yīng)路徑。

比如我們打開這個源碼中有的 todomvc 例子，來調(diào)試。http://localhost:64085/packages/vue/examples/composition/todomvc

//?packages/vue/examples/composition/todomvc.html
<script?src="../../dist/vue.global.js"></script>
<script>
const?{?createApp,?reactive,?computed,?watchEffect,?onMounted,?onUnmounted?}?=?Vue
//?省略若干代碼
//?我們可以在這里斷點調(diào)試
createApp({
??setup?()?{
????//?省略若干代碼
}).mount('#app')

文件開頭首先引入了文件vue.global.js，其底部注釋表明了 sourcemap 文件 URL。

//?../../dist/vue.global.js
var?Vue?=?(function?(exports)?{})({});
//#?sourceMappingURL=vue.global.js.map

我們可以在 createApp 函數(shù)處斷點調(diào)試，createApp 函數(shù)里再斷點調(diào)試，就是調(diào)試原來本身的源碼。也和上文提到的vitest vscode 插件 一樣調(diào)試。

調(diào)試如下圖 gif 圖所示。

至此，我們就也學會了根據(jù)項目中提供的命令通過生成 sourcemap 文件和調(diào)試源碼。

5.2 為何貢獻指南中寫的方式就能生成 sourcemap ？

有小伙伴可能會好奇，為啥貢獻指南，pnpm run build 編譯加參數(shù) --sourcemap 或者 -s 就能生成 sourcemap 呢。我們接下來探究下為啥 --sourcemap 或者 -s 就能生成 sourcemap 呢。

查看項目根目錄下的 package.json 的文件，我們可以得知：build 命令，實際執(zhí)行的是node scripts/build.js。

{
??"private":?true,
??"version":?"3.3.0-alpha.4",
??"packageManager":?"pnpm@7.26.0",
??"type":?"module",
??"scripts":?{
????"dev":?"node?scripts/dev.js",
????"build":?"node?scripts/build.js",
??},
}

找到這個文件 scripts/build.js。

//?scripts/build.js
import?minimist?from?'minimist'
import?execa?from?'execa'

const?args?=?minimist(process.argv.slice(2))

const?sourceMap?=?args.sourcemap?||?args.s

async?function?build(target)?{
??//???省略若干代碼
??const?env?=
????(pkg.buildOptions?&&?pkg.buildOptions.env)?||
????(devOnly???'development'?:?'production')
??await?execa(
????'rollup',
????[
??????'-c',
??????'--environment',
??????[
????????`COMMIT:${commit}`,
????????`NODE_ENV:${env}`,
????????`TARGET:${target}`,
????????formats???`FORMATS:${formats}`?:?``,
????????prodOnly???`PROD_ONLY:true`?:?``,
????????sourceMap???`SOURCE_MAP:true`?:?``
??????]
????????.filter(Boolean)
????????.join(',')
????],
????{?stdio:?'inherit'?}
??)
}

minimist^[14] 是解析命令行參數(shù)。execa^[15] 是子進程執(zhí)行命令。

相當于在命令行終端執(zhí)行rollup^[16] 打包：rollup -c --environment COMMIT:650f5c2,NODE_ENV:production,TARGET:compiler-ssr,SOURCE_MAP:true

看到這里，我們得知原來參數(shù) --sourcemap 或者 -s 控制的是 rollup 的 SOURCE_MAP:true 參數(shù)，從而控制是否生成 sourcemap 文件。

6. 總結(jié)

行文至此，我們來總結(jié)下。

看開源項目一定要先看官方的 README.md 和貢獻指南 contributing.md。

這是開源項目維護者為廣大想?yún)⑴c貢獻的開發(fā)者寫的。

我們通過學會了安裝 vitest vscode 擴展^[17]、vitest-runner vscode 擴展 github^[18]，根據(jù)測試用例，指定相應(yīng)的測試用例調(diào)試相應(yīng)的源碼。

測試用例非常重要。而且 vitest^[19] 是中文文檔，相對容易學習，非常值得我們學習。

另外，我們學會了如何生成 sourcemap，通過項目提供的例子，調(diào)試 Vue3 的源碼。同時，還探究了為何能夠編譯時傳參就能控制是否編譯生成 sourcemap 文件，本質(zhì)是利用命令行參數(shù)，最終控制 rollup 打包工具的 SOURCE_MAP:true 參數(shù)。

這篇文章整體比較簡單，主要在于是否知道這兩種調(diào)試源碼的方式。如果把看源碼比作登山，那么學會調(diào)試可以說是找到山的入口和爬山的方式。真正爬山，才是更難的時候。

如果看完有收獲，歡迎點贊、評論、分享支持。你的支持和肯定，是我寫作的動力。

參考資料

[1]

vue3 源碼: https://github.com/vuejs/core.git

[2]

contributing.md: https://github.com/vuejs/core/blob/main/.github/contributing.md

[3]

Node.js: https://nodejs.org

[4]

PNPM: https://pnpm.io

[5]

ni: https://github.com/antfu/ni

[6]

vitest vscode 擴展鏈接: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer

[7]

vitest vscode 擴展 github: https://github.com/vitest-dev/vscode

[8]

vitest-runner vscode 擴展鏈接: https://marketplace.visualstudio.com/items?itemName=kingwl.vscode-vitest-runner

[9]

vitest-runner vscode 擴展 github: https://github.com/kwai-explore/vscode-vitest-runner

[10]

Vitest: https://cn.vitest.dev/guide/

[11]

Jest: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

[12]

Jest Runner: https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

[13]

貢獻指南的文檔 contributing.md: https://github.com/vuejs/core/blob/main/.github/contributing.md

[14]

minimist: https://github.com/minimistjs/minimist

[15]

execa: https://github.com/sindresorhus/execa

[16]

rollup: https://rollupjs.org/guide/en

[17]

vitest vscode 擴展: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer

[18]

vitest-runner vscode 擴展 github: https://github.com/kwai-explore/vscode-vitest-runner

[19]

vitest: https://cn.vitest.dev/guide/

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高?！，F(xiàn)在是一名前端開發(fā)“工程師”。寫有《學習源碼整體架構(gòu)系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)堅持寫了8年，點擊查看年度總結(jié)。
同時，持續(xù)組織了一年多源碼共讀活動，幫助5000+前端人學會看源碼。公眾號愿景：幫助5年內(nèi)前端人走向前列。

掃碼加我微信 lxchuan12、拉你進源碼共讀群

今日話題

目前建有江西|湖南|湖北?籍 前端群，想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持~文章來源地址http://www.zghlxwxcb.cn/news/detail-760942.html