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

打包命令

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
    • 注入静态属性和预置生命周期
相关推荐
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121383 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴4 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript