Vue3源碼梳理：源碼目錄結構及源碼閱讀方法

VUE3 源碼目錄結構

1 ) 下載源碼三種方式

方式1，Download ZIP，不推薦
方式2，通過https,或ssh或github cli來克隆項目
- $ git clone https://github.com/vuejs/core.git
- $ git clone git@github.com:vuejs/core.git
方式3，點擊Fork, 到自己倉庫，再執行上面兩步的方式下載

2 ）源碼目錄解析

tsconfig.json ts 配置文件
rollup.config.js rollup 配置文件
packages 包
- compiler-core: 編譯器的核心庫
- compiler-dom: 編譯器瀏覽器相關
- compiler-ssr: 服務端渲染的編譯模塊
- compiler-sfc: .vue組件的編譯模塊
- reactivity: 響應性的核心模塊
- reactivity-transform: 已過期的模塊，無需過于關注
- runtime-core: 運行時核心庫，內部針對不同平臺進行實現
- runtime-dom：基于瀏覽器的運行時
- runtime-test：測試用的
- server-renderer：服務端渲染庫
- sfc-playground：sfc 工具，暫時無需關注，參考：https://sfc.vuejs.org
- shared: 存放共享工具方法等
- size-check: 運行時包大小的檢查庫，暫無需關注
- template-explorer: 提供的線上測試，暫無需關注，https://template-explorer.vuejs.org, 用于把template轉化為render
- vue: 包含測試實例，以及打包后的dist文件，src中對外暴露入口的方法
- vue-compat: vue2的兼容性代碼，以及vue的合并代碼
- global.d.ts 全局的ts聲明
netlify.toml 自動化部署相關
jest.config.js 測試相關
api-extractor.json ts的api分析工具
SECURITY.md 報告漏洞，維護安全的聲明
CHANGELOG.md 更新日志
BACKERS.md 贊助聲明
test-dts 測試相關
scripts 配置文件相關
pnpm-workspace.yaml pnpm 相關配置
pnpm-lock.yaml 使用 pnpm 下載的依賴包版本鎖文件

創建測試實例

1 ） 需要全局安裝下 pnpm

pnpm.io/zh/motivation
安裝完成，直接執行 pnpm i
之后運行：npm run build
編寫我們的用例，在vue/examples下新建我們測試的代碼目錄
- 新建reactivity目錄, 在其下新建 reactive.html
- 編寫如下代碼

2 ）編寫簡單測試代碼

<script src='../../dist/vue.global.js'></script><body><div id='app'></div>
</body><script>const { reactive, effect } = Vueconst obj = reactive({name: '張三'})effect(()=>{document.querySelector('#app').innerText = obj.name})const timer = setTimout(() => {clearTimeout(timer)obj.name = '李四'})
</script>

3 ）開啟sourceMap

只有開啟sourceMap才能進行debugger
這樣，我們就可以借助sourceMap查看打包之前的代碼，而非打包之后的代碼
我們打包用的命令在package.json中，是：node scripts/build.js
在這個文件中，我們可以看到: sourceMap ? SOURCE_MAP:true : ``, 這里開啟 sourceMap的關鍵就在這個變量里
這里的代碼：SOURCE_MAP:true 最終會被 rollup 構建
在rollup.config.js 中包含sourceMap的邏輯，大概在94行
output.sourcemap = !!process.env.SOURCE_MAP
這個變量 sourcemap 在 build.js中是取決于 args.sourcemap 或 args.s
而 args 是在使用了 minimist 庫來生成的：const args = require('minimist')(process.argv.slice(2))
這個 minimist 包是在 npmjs.com/package/minimist 中查看 example
而在vue中開啟sourceMap, 其實非常簡單，只需要在build命令后面添加 -s 參數即可
- "build": "node scripts/build.js -s"

4 ） 進行debugger

基于之前的live-server打開的http訪問的頁面：http://127.0.0.1:5500/**/code/vue-next-3.2.37/packages/vue/examples/reactivity/reactive.html
- 我們點擊chrome的Sources面板，向下可看到Page, Filesystem子面板，選擇Page面板，查看當前頁面對應的html文件里的代碼，我們可看到 reactive.html 文件
- 只有這一個html文件以及dist/vue.global.js的js文件
重新運行 build 命令, 在dist目錄中，發現生成了一些 map.js 文件
- 同樣，按上述步驟操作，查看 Page 子面板，等一會兒發現，同步了一堆文件：
- vue, compiler-core/src, compiler-dom/src, reactivity/src, runtime-core/src, runtime-dom/src, shared/src
現在我想調試，如上代碼中的 reactive api, 我在 reactivity/src/reactive.ts 中找到 reactive 函數并打上一個斷點，即可調試了

如何閱讀源碼

1 ) 關于誤區

誤區：
- 把源代碼中的每一行代碼都讀明白，這會導致事倍功半
正確：
- 摒棄邊緣情況，僅閱讀核心邏輯，一些邊緣的和一些條件可適當忽略
- 跟隨一條主線, 下面三大塊不是同時的，而是跟著一條線來走完
  - 響應性
  - 運行時
  - 編譯器

2 ）關于調試流程

基于上述源碼，我們可以測試我們的功能
但是為了研究出具體的功能，我們可以自行搭建一套類似vue的框架來簡化核心流程

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/212479.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/212479.shtml
英文地址，請注明出處：http://en.pswp.cn/news/212479.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！