Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
幾句話說(shuō)下我看源碼的方式
斷點(diǎn)調(diào)試
根據(jù)demo小例子或者api的使用姿勢(shì)進(jìn)行調(diào)試,每個(gè)小例子只關(guān)心其走過(guò)的邏輯分支。
如何調(diào)試vue3.x的ts源碼
- 官網(wǎng)說(shuō)使用 yarn dev 命令就可以對(duì)其進(jìn)行調(diào)試,可是運(yùn)行該命令后,是生成過(guò)后的代碼,不能對(duì)其編寫(xiě)的ts源碼進(jìn)行調(diào)試。
- 其實(shí)再生成對(duì)應(yīng)的sourcemap文件,便可以原汁原味的調(diào)試。
- 先看下幾個(gè)截圖:
如果這是你想要的調(diào)試效果,下面請(qǐng)看下如何生成sourcemap文件。
生成sourcemap文件
// rollup.config.js export default { // 核心選項(xiàng) input, // 必須 external, plugins, // 額外選項(xiàng) onwarn, // danger zone acorn, context, moduleContext, legacy output: { // 必須 (如果要輸出多個(gè),可以是一個(gè)數(shù)組) // 核心選項(xiàng) file, // 必須 format, // 必須 name, globals, // 額外選項(xiàng) paths, banner, footer, intro, outro, sourcemap, sourcemapFile, interop, // 高危選項(xiàng) exports, amd, indent strict }, };
可以看到output對(duì)象有個(gè)sourcemap屬性,其實(shí)只要配置上這個(gè)就能生成sourcemap文件了。 在vue-next項(xiàng)目中的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即可。 然后運(yùn)行 yarn dev,可以看到vue/dist/vue.global.js.map文件已生成。 再然后你在xxx.html通過(guò)script的方式引入vue.global.js文件,即可調(diào)試, 效果如上圖。
弱弱的說(shuō)一句,我對(duì)ts和rollup.js不熟,幾乎陌生,但是不影響學(xué)習(xí)vue3.x源碼。 vue3.x的源碼這次分幾個(gè)模塊編寫(xiě)的,所以學(xué)習(xí)也可以分模塊學(xué)習(xí),比如學(xué)習(xí)響應(yīng)式系統(tǒng),運(yùn)行yarn dev reactivity命令生成對(duì)應(yīng)文件,然后配合__tests__下的案列,自己進(jìn)行調(diào)試學(xué)習(xí)。(額,好像說(shuō)了好幾句...)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題
這篇文章主要介紹了Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Element?UI?Dialog對(duì)話框改成固定高度超出部分滾動(dòng)條滾動(dòng)
這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對(duì)話框改成固定高度超出部分滾動(dòng)條滾動(dòng)的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過(guò)屏幕時(shí)會(huì)出現(xiàn)滾動(dòng)條,按鈕和標(biāo)題都會(huì)隨著滾動(dòng),用戶體驗(yàn)不好,需要的朋友可以參考下2024-05-05Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫(huà)效果的示例
點(diǎn)贊動(dòng)畫(huà)是網(wǎng)頁(yè)評(píng)論中常見(jiàn)的功能,本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛(ài)心縮小變大,變大時(shí)略微大一點(diǎn)再變正常,取消點(diǎn)贊時(shí)愛(ài)心無(wú)動(dòng)畫(huà),同時(shí)數(shù)字滾動(dòng),+1 時(shí)向上滾動(dòng),-1 時(shí)向下滾動(dòng)2021-05-05vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法
這篇文章主要介紹了vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)
在前后端分離的項(xiàng)目中經(jīng)常使用到Vue+axios通過(guò)FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-09-09