亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3.x源碼調(diào)試的實現(xiàn)方法

 更新時間:2019年10月13日 09:13:24   作者:徐志偉醬  
這篇文章主要介紹了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.js中文文檔

// 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的過度與動畫

    深入理解Vue的過度與動畫

    這篇文章主要為大家介紹了Vue的過度與動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Vue如何處理Axios多次請求數(shù)據(jù)顯示問題

    Vue如何處理Axios多次請求數(shù)據(jù)顯示問題

    這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動

    Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動

    這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動的相關(guān)資料,el-dialog默認高度是自由拉伸的,當內(nèi)容超過屏幕時會出現(xiàn)滾動條,按鈕和標題都會隨著滾動,用戶體驗不好,需要的朋友可以參考下
    2024-05-05
  • Vue transition實現(xiàn)點贊動畫效果的示例

    Vue transition實現(xiàn)點贊動畫效果的示例

    點贊動畫是網(wǎng)頁評論中常見的功能,本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大,變大時略微大一點再變正常,取消點贊時愛心無動畫,同時數(shù)字滾動,+1 時向上滾動,-1 時向下滾動
    2021-05-05
  • vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用

    vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用

    這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解

    vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解

    這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue-router傳參的四種方式超詳細講解

    vue-router傳參的四種方式超詳細講解

    這篇文章主要介紹了vue-router傳參的四種方式超詳細,有router-link路由導航方式傳參,調(diào)用$router.push實現(xiàn)路由傳參,通過路由屬性name匹配路由,再根據(jù)params傳遞參數(shù)等等,結(jié)合示例代碼講解的非常詳細,需要的朋友可以參考下
    2022-12-12
  • vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法

    vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法

    這篇文章主要介紹了vue進入頁面時不在頂部,檢測滾動返回頂部按鈕問題及解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10
  • 詳解Vue實現(xiàn)直播功能

    詳解Vue實現(xiàn)直播功能

    這篇文章主要介紹了Vue實現(xiàn)直播功能,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-10-10
  • Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)

    Vue+axios使用FormData方式向后端發(fā)送數(shù)據(jù)

    在前后端分離的項目中經(jīng)常使用到Vue+axios通過FormData的方式向后端發(fā)送表單數(shù)據(jù),下面就來介紹一下如何實現(xiàn),感興趣的可以了解一下
    2023-09-09

最新評論