Vue3.x源碼調(diào)試的實現(xiàn)方法
幾句話說下我看源碼的方式
斷點調(diào)試
根據(jù)demo小例子或者api的使用姿勢進行調(diào)試,每個小例子只關(guān)心其走過的邏輯分支。
如何調(diào)試vue3.x的ts源碼
- 官網(wǎng)說使用 yarn dev 命令就可以對其進行調(diào)試,可是運行該命令后,是生成過后的代碼,不能對其編寫的ts源碼進行調(diào)試。
- 其實再生成對應(yīng)的sourcemap文件,便可以原汁原味的調(diào)試。
- 先看下幾個截圖:
如果這是你想要的調(diào)試效果,下面請看下如何生成sourcemap文件。
生成sourcemap文件
// rollup.config.js export default { // 核心選項 input, // 必須 external, plugins, // 額外選項 onwarn, // danger zone acorn, context, moduleContext, legacy output: { // 必須 (如果要輸出多個,可以是一個數(shù)組) // 核心選項 file, // 必須 format, // 必須 name, globals, // 額外選項 paths, banner, footer, intro, outro, sourcemap, sourcemapFile, interop, // 高危選項 exports, amd, indent strict }, };
可以看到output對象有個sourcemap屬性,其實只要配置上這個就能生成sourcemap文件了。 在vue-next項目中的rollup.config.js文件中,找到createConfig函數(shù)
function createConfig(output, plugins = []) { const isProductionBuild = process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file) const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file) const isBunlderESMBuild = /\.esm\.js$/.test(output.file) const isBrowserESMBuild = /esm-browser(\.prod)?\.js$/.test(output.file) if (isGlobalBuild) { output.name = packageOptions.name } const shouldEmitDeclarations = process.env.TYPES != null && process.env.NODE_ENV === 'production' && !hasTSChecked const tsPlugin = ts({ check: process.env.NODE_ENV === 'production' && !hasTSChecked, tsconfig: path.resolve(__dirname, 'tsconfig.json'), cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'), tsconfigOverride: { compilerOptions: { declaration: shouldEmitDeclarations, declarationMap: shouldEmitDeclarations }, exclude: ['**/__tests__'] } }) // we only need to check TS and generate declarations once for each build. // it also seems to run into weird issues when checking multiple times // during a single build. hasTSChecked = true const externals = Object.keys(aliasOptions).filter(p => p !== '@vue/shared') output.sourcemap = true // 這句話是新增的 return { input: resolve(`src/index.ts`), // Global and Browser ESM builds inlines everything so that they can be // used alone. external: isGlobalBuild || isBrowserESMBuild ? [] : externals, plugins: [ json({ namedExports: false }), tsPlugin, aliasPlugin, createReplacePlugin( isProductionBuild, isBunlderESMBuild, isGlobalBuild || isBrowserESMBuild ), ...plugins ], output, onwarn: (msg, warn) => { if (!/Circular/.test(msg)) { warn(msg) } } } }
加上一句output.sourcemap = true即可。 然后運行 yarn dev,可以看到vue/dist/vue.global.js.map文件已生成。 再然后你在xxx.html通過script的方式引入vue.global.js文件,即可調(diào)試, 效果如上圖。
弱弱的說一句,我對ts和rollup.js不熟,幾乎陌生,但是不影響學習vue3.x源碼。 vue3.x的源碼這次分幾個模塊編寫的,所以學習也可以分模塊學習,比如學習響應(yīng)式系統(tǒng),運行yarn dev reactivity命令生成對應(yīng)文件,然后配合__tests__下的案列,自己進行調(diào)試學習。(額,好像說了好幾句...)
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動
這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動的相關(guān)資料,el-dialog默認高度是自由拉伸的,當內(nèi)容超過屏幕時會出現(xiàn)滾動條,按鈕和標題都會隨著滾動,用戶體驗不好,需要的朋友可以參考下2024-05-05Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能,本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大,變大時略微大一點再變正常,取消點贊時愛心無動畫,同時數(shù)字滾動,+1 時向上滾動,-1 時向下滾動2021-05-05vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法
這篇文章主要介紹了vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)
在前后端分離的項目中經(jīng)常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-09-09