vue2.7.16源码 - Vue项目入口和打包核心代码分析

打包命令

scripts:{
     "build": "node scripts/build.js",
}

scripts/build.js

• 实际运行的打包命令,通过rollup实现

  •   const rollup = require('rollup')
      // 读取配置代码,开始构建代码
      let builds = require('./config').getAllBuilds()
    
      build(builds)
    
      function build (builds) {
        let built = 0
        const total = builds.length
        const next = () => {
          buildEntry(builds[built]).then(() => {
            built++
            if (built < total) {
              next()
            }
          }).catch(logError)
        }
        next()
      }
    
      }
    
      function buildEntry (config) {
        const output = config.output
        const { file, banner } = output
        const isProd = /(min|prod).js$/.test(file)
        return rollup.rollup(config)
          .then(bundle => bundle.generate(output))
          .then(async ({ output: [{ code }] }) => {
            if (isProd) {
              const {code: minifiedCode} =  await terser.minify(code, {
                toplevel: true,
                compress: {
                  pure_funcs: ['makeMap'],
                },
                format: {
                  ascii_only: true,
                }
              });
              const minified = (banner ? banner + '\n' : '') + minifiedCode
              return write(file, minified, true)
            } else {
              return write(file, code)
            }
          })
      }
    

scripts/config.js

• 配置打包输出和输入路径

  • 

scripts/alias.js

• 指定vue目标文件,web和sfc等目标文件

  •   const path = require('path')
    
      const resolve = p => path.resolve(__dirname, '../', p)
    
      module.exports = {
        vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
        compiler: resolve('src/compiler'),
        core: resolve('src/core'),
        shared: resolve('src/shared'),
        web: resolve('src/platforms/web'),
        server: resolve('packages/server-renderer/src'),
        sfc: resolve('packages/compiler-sfc/src')
      }
    

src/platforms/web/entry-runtime-with-compiler.ts

• vue对外暴露的入口文件,核心vue构造函数

引用过程(渐进增强)

• entry-runtime-with-compiler
  • vue暴露的最外层核心类
  • 插入composition Api
  • watcher构建
• src/platforms/web/runtime-with-compiler.ts
  • 增加render构建执行,触发mounted
• src/platforms/web/runtime/index.ts
  • 注入components和$mount
• src/core/index.ts
  • 注入静态属性和预置生命周期