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

更新時(shí)間：2019年10月13日 09:13:24 作者：徐志偉醬

這篇文章主要介紹了Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

幾句話說下我看源碼的方式

斷點(diǎn)調(diào)試

根據(jù)demo小例子或者api的使用姿勢進(jìn)行調(diào)試，每個(gè)小例子只關(guān)心其走過的邏輯分支。

如何調(diào)試vue3.x的ts源碼

官網(wǎng)說使用 yarn dev 命令就可以對其進(jìn)行調(diào)試，可是運(yùn)行該命令后，是生成過后的代碼，不能對其編寫的ts源碼進(jìn)行調(diào)試。
其實(shí)再生成對應(yīng)的sourcemap文件，便可以原汁原味的調(diào)試。
先看下幾個(gè)截圖：

如果這是你想要的調(diào)試效果，下面請看下如何生成sourcemap文件。

生成sourcemap文件

rollup.js中文文檔

// 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對象有個(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通過script的方式引入vue.global.js文件，即可調(diào)試, 效果如上圖。

弱弱的說一句，我對ts和rollup.js不熟，幾乎陌生，但是不影響學(xué)習(xí)vue3.x源碼。 vue3.x的源碼這次分幾個(gè)模塊編寫的，所以學(xué)習(xí)也可以分模塊學(xué)習(xí)，比如學(xué)習(xí)響應(yīng)式系統(tǒng)，運(yùn)行yarn dev reactivity命令生成對應(yīng)文件，然后配合__tests__下的案列，自己進(jìn)行調(diào)試學(xué)習(xí)。(額，好像說了好幾句...)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: