Vue 3 Pre-Alpha 源码调试

资源

• vue-next

Vue 3 Pre-Alpha 源码调试步骤

1. clone 源码

   git clone https://github.com/vuejs/vue-next.git

2. 下载依赖

   cd vue-next
   yarn

3. 启用 sourcemap
   将根目录下的 rollup.config.js 配置文件内容替换为:

   const fs = require('fs')
   const path = require('path')
   const ts = require('rollup-plugin-typescript2')
   const replace = require('rollup-plugin-replace')
   const alias = require('rollup-plugin-alias')
   const json = require('rollup-plugin-json')
   
   if (!process.env.TARGET) {
     throw new Error('TARGET package must be specified via --environment flag.')
   }
   
   const packagesDir = path.resolve(__dirname, 'packages')
   const packageDir = path.resolve(packagesDir, process.env.TARGET)
   const name = path.basename(packageDir)
   const resolve = p => path.resolve(packageDir, p)
   const pkg = require(resolve(`package.json`))
   const packageOptions = pkg.buildOptions || {}
   
   // build aliases dynamically
   const aliasOptions = { resolve: ['.ts'] }
   fs.readdirSync(packagesDir).forEach(dir => {
     if (dir === 'vue') {
       return
     }
     if (fs.statSync(path.resolve(packagesDir, dir)).isDirectory()) {
       aliasOptions[`@vue/${dir}`] = path.resolve(packagesDir, `${dir}/src/index`)
     }
   })
   const aliasPlugin = alias(aliasOptions)
   
   // ensure TS checks only once for each build
   let hasTSChecked = false
   
   const configs = {
     esm: {
       file: resolve(`dist/${name}.esm-bundler.js`),
       format: `es`
     },
     cjs: {
       file: resolve(`dist/${name}.cjs.js`),
       format: `cjs`
     },
     global: {
       file: resolve(`dist/${name}.global.js`),
       format: `iife`
     },
     'esm-browser': {
       file: resolve(`dist/${name}.esm-browser.js`),
       format: `es`
     }
   }
   
   const defaultFormats = ['esm', 'cjs']
   const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')
   const packageFormats = inlineFormats || packageOptions.formats || defaultFormats
   const packageConfigs = process.env.PROD_ONLY
     ? []
     : packageFormats.map(format => createConfig(configs[format]))
   
   if (process.env.NODE_ENV === 'production') {
     packageFormats.forEach(format => {
       if (format === 'cjs') {
         packageConfigs.push(createProductionConfig(format))
       }
       if (format === 'global' || format === 'esm-browser') {
         packageConfigs.push(createMinifiedConfig(format))
       }
     })
   }
   
   module.exports = packageConfigs
   
   function createConfig(output, plugins = []) {
     // 启用 sourcemap
     output.sourcemap = true
   
     const isProductionBuild =
       process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
     const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file)
     const isBundlerESMBuild = /\.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')
   
     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,
           isBundlerESMBuild,
           (isGlobalBuild || isBrowserESMBuild) &&
             !packageOptions.enableNonBrowserBranches
         ),
         ...plugins
       ],
       output,
       onwarn: (msg, warn) => {
         if (!/Circular/.test(msg)) {
           warn(msg)
         }
       }
     }
   }
   
   function createReplacePlugin(isProduction, isBundlerESMBuild, isBrowserBuild) {
     return replace({
       __COMMIT__: `"${process.env.COMMIT}"`,
       __DEV__: isBundlerESMBuild
         ? // preserve to be handled by bundlers
           `process.env.NODE_ENV !== 'production'`
         : // hard coded dev/prod builds
           !isProduction,
       // If the build is expected to run directly in the browser (global / esm-browser builds)
       __BROWSER__: isBrowserBuild,
       // support options?
       // the lean build drops options related code with buildOptions.lean: true
       __FEATURE_OPTIONS__: !packageOptions.lean,
       __FEATURE_SUSPENSE__: true,
       // this is only used during tests
       __JSDOM__: false
     })
   }
   
   function createProductionConfig(format) {
     return createConfig({
       file: resolve(`dist/${name}.${format}.prod.js`),
       format: configs[format].format
     })
   }
   
   function createMinifiedConfig(format) {
     const { terser } = require('rollup-plugin-terser')
     return createConfig(
       {
         file: resolve(`dist/${name}.${format}.prod.js`),
         format: configs[format].format
       },
       [
         terser({
           module: /^esm/.test(format)
         })
       ]
     )
   }

   将根目录下的 tsconfig.json typescript 配置文件内容替换为:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "outDir": "dist",
       "sourceMap": true,
       "target": "esnext",
       "module": "esnext",
       "moduleResolution": "node",
       "allowJs": false,
       "noUnusedLocals": true,
       "strictNullChecks": true,
       "noImplicitAny": true,
       "noImplicitThis": true,
       "experimentalDecorators": true,
       "resolveJsonModule": true,
       "esModuleInterop": true,
       "removeComments": false,
       "jsx": "react",
       "lib": ["esnext", "dom"],
       "types": ["jest", "node"],
       "rootDir": ".",
       "paths": {
         "@vue/shared": ["packages/shared/src"],
         "@vue/runtime-core": ["packages/runtime-core/src"],
         "@vue/runtime-dom": ["packages/runtime-dom/src"],
         "@vue/runtime-test": ["packages/runtime-test/src"],
         "@vue/reactivity": ["packages/reactivity/src"],
         "@vue/compiler-core": ["packages/compiler-core/src"],
         "@vue/compiler-dom": ["packages/compiler-dom/src"],
         "@vue/server-renderer": ["packages/server-renderer/src"],
         "@vue/template-explorer": ["packages/template-explorer/src"]
       }
     },
     "include": [
       "packages/global.d.ts",
       "packages/runtime-dom/jsx.d.ts",
       "packages/*/src",
       "packages/*/__tests__"
     ]
   }

4. 编译源码

   yarn dev

5. 调试
   在 vue-next/vue 目录下新建 index.html 文件, 内容为:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>vue 3 test</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
   </head>
   <body>
   <div id="app" class="content">
   </div>
   <div class="has-text-centered">
     <a id="button" class="button is-info is-rounded">Rounded</a>
   </div>
   <script src="./dist/vue.global.js">
   </script>
   <script>
   console.log(Vue)
   const { reactive, watch } = Vue
   
   const state = reactive({
     count: 0
   })
   
   const appEle = document.getElementById('app')
   watch(() => {
     const template = `<p class="has-text-centered">
                           count is ${state.count}
                       <p>`
     appEle.innerHTML = template
   })
   const increment = (e) => {
     state.count++
   }
   document.getElementById('button').addEventListener('click', increment)
   </script>
   </body>
   </html>

浏览器打开 index.html 即可调试.