最近想系統學習一下vue3的源代碼，本篇內容記錄和分享一下，如何除錯vue3的源代碼，
1. 下載源代碼
1.1 github下載
想獲取vue3的原始碼，需要直接從github上vue3的倉庫獲取，vue3github原始碼地址為：
- https://github.com/vuejs/core
注意，vue3的原始碼是在這個 core目錄下，一些同學別一直找目錄為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打開原始碼
2.2 下載依賴
注意： 下載依賴時， 請使用 yarn 下載，使用 npm 不好使，
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"
},
3.2 打包運行vue3原始碼
在終端中運行yarn dev 命令，進行打包：
yarn dev
打包后的檔案，在下圖所示目錄：
packages/vue/dist/vue-global.js
3.3 運行examples目錄下的demo檔案
如下圖所示的檔案，隨便點一個，使用live-server 打開，
如果沒有安裝live-server，需要先裝一下
運行起來后，可以看到示例中的demo已經可以正常訪問了，如下圖所示：
重點看下圖中控制臺中的地方，這里我們在Source 下，已經可以看到，packages目錄下的原始碼了，
，之后我們就可以在devTools中，對原始碼進行斷點除錯了，
如下圖所示：
最后，這里我們對比一下，沒用啟動 source map 時，devTools的情況:
可以看到，如果沒有啟用 sourcemap，是無法除錯原始碼的，
結語
好了，就記錄到這里了，想要除錯原始碼的同學，可以開整了，
作者：CherishTheYouth 出處：https://www.cnblogs.com/CherishTheYouth/ 宣告：本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文鏈接，對于本博客如有任何問題，可發郵件與我溝通，我的QQ郵箱是：[email protected]轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428534.html
標籤：其他
上一篇：javascript創建物件