Vue3.x源碼調試

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

1. 斷點調試
2. 根據demo小例子或者api的使用姿式進行調試，每一個小例子只關心其走過的邏輯分支。

如何調試vue3.x的ts源碼

• 官網說使用 yarn dev 命令就能夠對其進行調試，但是運行該命令後，是生成事後的代碼，不能對其編寫的ts源碼進行調試。
• 其實再生成對應的sourcemap文件，即可以原汁原味的調試。
• 先看下幾個截圖：

若是這是你想要的調試效果，下面請看下如何生成sourcemap文件。

生成sourcemap文件

rollup.js中文文檔

// rollup.config.js
export default {
  // 核心選項
  input,     // 必須
  external,
  plugins,

  // 額外選項
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必須 (若是要輸出多個，能夠是一個數組)
    // 核心選項
    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函數

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便可。同時在tsconfig.json配置文件中的sourceMap改爲true，就能夠了。 而後運行 yarn dev,能夠看到vue/dist/vue.global.js.map文件已生成。 再而後你在xxx.html經過script的方式引入vue.global.js文件，便可調試, 效果如上圖。

弱弱的說一句，我對ts和rollup.js不熟，幾乎陌生，可是不影響學習vue3.x源碼。 vue3.x的源碼此次分幾個模塊編寫的，因此學習也能夠分模塊學習，好比學習響應式系統，運行yarn dev reactivity命令生成對應文件，而後配合__tests__下的案列，本身進行調試學習。(額，好像說了好幾句...)