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

梦里母猪上树2025-03-25 14:13

打包命令

css 复制代码

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

scripts/build.js

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

javascript 复制代码

  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等目标文件

less 复制代码

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