In the comments below, some students give a very convenient way to debug, there is no need to follow the way I wrote before debugging, directly read the following sentences.

  1. Use the ‘yarn build -s’ command:
    • You can use yarn build -s to enable sourcemap debugging. The corresponding. Map file is generated
    • HTML file to introduce the generated JS file can be authentic debugging
  2. Using the ‘NPM run test package module name’ command:
    • If you don’t understand the source code, for example, if you don’t understand a line of effect.ts code in the reactivity module, you can comment it out and then run NPM run test reactivity. In this way, some single tests will report errors. Debugger the single test, can understand the source code do not understand.
    • In addition to running the ‘NPM run test package module’ command, you can also download the Jest Runner plugin in vscode, and directly select the single-side file you want to run in the __test__ directory. Click the debugger bug button to run the single-side test.
The above method is very simple. Thanks for jojowang and imart's reply. I don't want to see the next big pile. Waste of time.Copy the code

— — — — — — — — — — — — — — — — — — — — — — — — — — — there is no need to see the below, a waste of time — — — — — — — — — — — — — — — — — — — — — — — — — — —

A few words about the way I look at the source code

  1. Breakpoint debugging
  2. Debug according to the usage posture of the small demo or API, each small example is only concerned with the branch of logic it walks through.

How to debug vue3. X TS source code

  • The official website says that the yarn dev command can be used to debug the TS source code. However, after running the yarn dev command, the generated code cannot be debugged.
  • In fact, regenerate into the corresponding sourcemap file, you can debug the original taste.
  • Take a look at a few screenshots:

If this is what you want to debug, take a look at generating the Sourcemap file.

Generate the sourcemap file

Rollup. js Chinese document

// rollup.config.js
exportDefault {// core options input, // must external, plugins, // additional options onWARN, // Danger Zone acorn, context, moduleContext, legacy output: {// must (if you want to output more than one, // Optional paths, banner, Footer, Intro, outro, sourcemap, SourcemapFile, interop, // high risk options exports, AMD, indent strict},};Copy the code

You can see that the Output object has a sourcemap attribute, which can be configured to generate the sourcemap file. In the rollup.config.js file in the Vue-next project, locate the createConfig function

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// This sentence is a new onereturn {
    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) } } } }Copy the code

Add output.sourcemap = true. Change the sourceMap value to true in the tsconfig.json configuration file, and you’ll be fine. Then run the yarn dev, you can see the vue/dist/vue. Global. Js. Map file has been generated. Then you can debug the vue.global.js file via script in xxx. HTML, and the result is as shown in the picture above.

To be clear, I am not familiar with ts and rhupu.js, but it does not affect the vue3.x source code. Vue3. X source code is written in several modules this time, so learning can also be divided into modules to learn, such as learning responsive system, run yarn dev reactivity command to generate the corresponding file, and then with __tests__ case column, debug learning. (Uh, like a couple of words…)