Whatever we learn any language and technology, must first learn to debug the code, it can help us more intuitive understanding of the code of operation, environment variables, an error message, runtime state, etc., these can help us study better and faster, so we in the deep source before learning vue ~ source debugging method

Vue example todomvc.. /.. /dist/vue.js

(1) Location

(2) What is it?

Is built out of uncompressed source vue.js source code, we can be introduced through the following way to use

<script src=".. /.. /dist/vue.js"></script>
Copy the code

In fact, the Vue document refers to the vue.js that we built and generated.. /.. /dist/vue.js, they’re actually the same thing

<! -- Development environment version, including helpful command line warnings --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
Copy the code

How is vue.js built?

Start with NPM run dev

Take a look at the scripts for package.json

"scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
 }
Copy the code

Rollup is a JavaScript module wrapper that compiles small chunks of code into large, complex chunks of code, such as libraries or applications.

  • The build entry is scripts/config.js

  • The built environment is TARGET:web-full-dev, which determines the entry to the build file and the generated dist directory file

    Take a look at some of the code in the scripts/config.js file where the value of process.env.TARGET is the value of the environment variable ‘web-full-dev’

    1. The following code is executed first
    //scripts/config.js 
if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () = > Object.keys(builds).map(genConfig)
}

Copy the code

    The above code will actually run genConfig(process.env.target), which is genConfig(‘web-full-dev’)

    1. Let’s move on to ****genConfig('web-full-dev')This part of the code isGenerate the configuration files required for the rollup build, the key code isconst opts = builds[name] 
    // scripts/config.js
function genConfig (name) {
  const opts = builds[name] / / perform builds [' web - full - dev]
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      flow(),
      alias(Object.assign({}, aliases, opts.alias))
    ].concat(opts.plugins || []),
    output: {
      file: opts.dest,
      format: opts.format,
      banner: opts.banner,
      name: opts.moduleName || 'Vue'
    },
    onwarn: (msg, warn) = > {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    }
  }
  // Other code omitted......
  return config
}
Copy the code
    1. Builds are an object

    The second step is to run builds[‘web-full-dev’], which is available in the following source

        // scripts/config.js
    const builds = {
      // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
      'web-runtime-cjs-dev': {
            entry: resolve('web/entry-runtime.js'),
            dest: resolve('dist/vue.runtime.common.dev.js'),
            format: 'cjs'.env: 'development',
            banner
      },
      
        // Runtime+compiler development build (Browser)
      'web-full-dev': {// This is it
            entry: resolve('web/entry-runtime-with-compiler.js'),
            dest: resolve('dist/vue.js'),
            format: 'umd'.env: 'development'.alias: { he: './entity-decoder'}, banner}, the others are omitted....... }Copy the code

    Builds [‘web-full-dev’] would return the following objects, except that the path would be resolved to the true path of the file; The output path after the Rollup build is dest: resolve(‘dist/vue.js’), which is vue.js in the dist directory in our source code

    The entry and output files for the Rollup build are determined, and the build logic can then be executed

    {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd'.env: 'development'.alias: { he: './entity-decoder' },
    banner
}
Copy the code

    1. Finally, through the Rollup build process, the vue.js file we see in the dist directory is generated.

    Third, how to debug?

    • 1. Run NPM run dev

      Rollup monitors source code changes and triggers recompilation whenever a file in the source SRC directory is changed

  • 2. Breakpoint mode

This way we can add breakpoints and console debugging source code

Iv. Reference materials

Vue. Js technology revealed