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
  • 注入静态属性和预置生命周期