如何調試Vue3源碼？

本文轉載自查看原文 2022-02-19 16:41 1493 前端

最近想系統學習一下vue3的源代碼，本篇內容記錄和分享一下，如何調試vue3的源代碼。

1. 下載源代碼

1.1 github下載

想獲取vue3的源碼，需要直接從github上vue3的倉庫獲取，vue3github源碼地址為：

https://github.com/vuejs/core

注意，vue3的源碼是在這個 core目錄下，一些同學別一直找目錄為vue3的文件夾，那是找不到的哈。
github vue3源碼地址

1.2 碼雲（gitee下載）

github雖好，但是對於國內用戶，總還是有點敵意，訪問的時候經常進不去，或者很慢，我在公司訪問github時好好的，但在家就死活進不去，使用了代理也一樣，所以啊，如果vue官方倉庫能在gitee上維護一個倉庫就太棒了。

這里，我提供一個自己在gitee上找的私人上傳的vue3源碼倉庫，希望能幫助跟我一樣進不去github或者在github上clone失敗的同學。

gitee地址：https://gitee.com/JingWa/vue3-next

現在，訪問以上地址將源碼clone 到本地就可以了

2. 安裝依賴

2.1 使用VsCode打開源碼

vue3源碼

2.2 下載依賴

注意： 下載依賴時，請使用 yarn 下載，使用 npm 不好使。
使用yarn下載依賴

3. 調試源代碼

3.1 啟用source map

source map是啥？那個，自己百度一下子哈，我一下子也說不清楚，哈哈！

如果想要在源碼中打斷點進行調試，需要滿足2個條件：

開啟source map模式；
把源碼跑起來；

如何啟用source map？

找到vue3源碼的 package.json文件；
在package.json源碼打包腳本中，添加--sourcemap 的配置

"scripts": {
    "dev": "node scripts/dev.js --sourcemap", // 這里添加 --sourcemap，開啟sourcemap模式
    "build": "node scripts/build.js",
    "size": "node scripts/build.js vue runtime-dom size-check -p -f global",
    "lint": "eslint --ext .ts packages/*/src/**",
    "format": "prettier --write --parser typescript \"packages/**/*.ts?(x)\"",
    "test": "node scripts/build.js vue -f global -d && jest --runInBand",
    "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && yarn test-dts-only",
    "test-dts-only": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json",
    "release": "node scripts/release.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "dev-compiler": "npm-run-all --parallel \"dev template-explorer\" serve",
    "serve": "serve",
    "open": "open http://localhost:5000/packages/template-explorer/local.html",
    "preinstall": "node ./scripts/checkYarn.js",
    "prebuild-sfc-playground": "node scripts/build.js compiler shared -af cjs && node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime && node scripts/build.js compiler-sfc -f esm-browser",
    "build-sfc-playground": "cd packages/sfc-playground && vite build"
  },

開啟sourcemap