Vue2源码梳理：源码构建流程与运行时和编译时的版本选择

Wang's Blog2023-12-23 4:52

Vue.js 源码构建

1 ）rollup 和 webpack 的对比

  • vuejs的源码呢是基于rollup构建的
  • rollup 和 webpack 都是一个构建工具
    • webpack 它会更强大一些, 会把像图片, css等静态资源通通编译成javascript
    • rollup 更适合一种javscript库的一个编译
      • 它只出了js部分，而其他资源它是不管的，所以它更轻量
      • 在编译后代码也是更友好的
    • 所以 vuejs 就选了rollup做构建

2 ）rollup的构建设计

  • vuejs 是发布到 npm 上的一个包, 每个包都是需要一个package.json文件来做描述
  • 它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象
  • 比如说，常用的属性， name, version, description, main, module, ...
    • main 是vue的入口，在 import vue 时，通过这个 main 来查找入口, 后缀是.js
    • module 和 main 非常类似的，在webpack2以上把 module作为默认入口, 后缀是 .esm.js
  • vuejs 源码是基于 rollup 构建的，它的构建相关配置都在 scripts 目录下
  • npm 提供了一个叫 npm scripts 的东西
    • 之前早期构建, 可能会用到gulp或者grunt
    • 它们两个都是一个以任务为基准的
    • 也就是说可以定义一系列任务
    • npm scripts 就是完成了这部分的功能
    • 也就是说它定义了很多脚本, 每个脚本都是一个任务
    • 通过 npm run xxx 可以执行不同的任务
    • 构建相关的任务，就是这三个
      • build 构建web平台相关
      • build:ssr 构建服务端渲染相关
      • build:weex 构建weex平台相关
  • 我们的源码是托管在 src 目录下，通过构建生成的目标代码在 dist 目录下
    • 在vue的仓库下，它已经默认帮我们构建出来很多版本的vuejs
    • 那为什么我们能构建如此多版本的vuejs呢？

3 ）rollup构建vuejs的过程

package.json

js 复制代码 
{
  "script": {
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex"
  }
}
  • 当我们去执行的这个 npm scripts 的时候，比如说，执行 npm run build
  • 它实际上就是执行了这样一个脚本 node scripts/build.js
  • 我们来看一下 scripts/build.js

scripts/build.js

js 复制代码 
const fs = require('fs')
const path = require('path')
const zlib = require('zlib')
const rollup = require('rollup')
const terser = require('terser')

if (!fs.existsSync('dist')) {
  fs.mkdirSync('dist')
}

let builds = require('./config').getAllBuilds()

// filter builds via command line arg
if (process.argv[2]) {
  const filters = process.argv[2].split(',')
  builds = builds.filter(b => {
    return filters.some(f => b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1)
  })
} else {
  // filter out weex builds by default
  builds = builds.filter(b => {
    return b.output.file.indexOf('weex') === -1
  })
}

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(({ output: [{ code }] }) => {
      if (isProd) {
        const minified = (banner ? banner + '\n' : '') + terser.minify(code, {
          toplevel: true,
          output: {
            ascii_only: true
          },
          compress: {
            pure_funcs: ['makeMap']
          }
        }).code
        return write(file, minified, true)
      } else {
        return write(file, code)
      }
    })
}

function write (dest, code, zip) {
  return new Promise((resolve, reject) => {
    function report (extra) {
      console.log(blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code) + (extra || ''))
      resolve()
    }

    fs.writeFile(dest, code, err => {
      if (err) return reject(err)
      if (zip) {
        zlib.gzip(code, (err, zipped) => {
          if (err) return reject(err)
          report(' (gzipped: ' + getSize(zipped) + ')')
        })
      } else {
        report()
      }
    })
  })
}

function getSize (code) {
  return (code.length / 1024).toFixed(2) + 'kb'
}

function logError (e) {
  console.log(e)
}

function blue (str) {
  return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
}
  • 前面声明读取的模块
  • let builds = require('./config').getAllBuilds() 是从配置文件中，读取配置
  • 之后，再通过命令行参数对构建配置做过滤，最终调用 build() 函数 进行真正的构建
  • 所以它整个的构建的流程是非常清晰的
  • 那我们首先来分析一下这个这就是怎么拿到的

打开 .config 文件

js 复制代码 
const path = require('path')
const buble = require('rollup-plugin-buble')
const alias = require('rollup-plugin-alias')
const cjs = require('rollup-plugin-commonjs')
const replace = require('rollup-plugin-replace')
const node = require('rollup-plugin-node-resolve')
const flow = require('rollup-plugin-flow-no-whitespace')
const version = process.env.VERSION || require('../package.json').version
const weexVersion = process.env.WEEX_VERSION || require('../packages/weex-vue-framework/package.json').version
const featureFlags = require('./feature-flags')

const banner =
  '/*!\n' +
  ` * Vue.js v${version}\n` +
  ` * (c) 2014-${new Date().getFullYear()} Evan You\n` +
  ' * Released under the MIT License.\n' +
  ' */'

const weexFactoryPlugin = {
  intro () {
    return 'module.exports = function weexFactory (exports, document) {'
  },
  outro () {
    return '}'
  }
}

const aliases = require('./alias')
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

const builds = {
  // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
  'web-runtime-cjs-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.common.dev.js'),
    format: 'cjs',
    env: 'development',
    banner
  },
  'web-runtime-cjs-prod': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.common.prod.js'),
    format: 'cjs',
    env: 'production',
    banner
  },
  // Runtime+compiler CommonJS build (CommonJS)
  'web-full-cjs-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.dev.js'),
    format: 'cjs',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },
  'web-full-cjs-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.common.prod.js'),
    format: 'cjs',
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
  },
  // Runtime only ES modules build (for bundlers)
  'web-runtime-esm': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.esm.js'),
    format: 'es',
    banner
  },
  // Runtime+compiler ES modules build (for bundlers)
  'web-full-esm': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm.js'),
    format: 'es',
    alias: { he: './entity-decoder' },
    banner
  },
  // Runtime+compiler ES modules build (for direct import in browser)
  'web-full-esm-browser-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm.browser.js'),
    format: 'es',
    transpile: false,
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },
  // Runtime+compiler ES modules build (for direct import in browser)
  'web-full-esm-browser-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.esm.browser.min.js'),
    format: 'es',
    transpile: false,
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
  },
  // runtime-only build (Browser)
  'web-runtime-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.js'),
    format: 'umd',
    env: 'development',
    banner
  },
  // runtime-only production build (Browser)
  'web-runtime-prod': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.min.js'),
    format: 'umd',
    env: 'production',
    banner
  },
  // Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },
  // Runtime+compiler production build  (Browser)
  'web-full-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.min.js'),
    format: 'umd',
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
  },
  // Web compiler (CommonJS).
  'web-compiler': {
    entry: resolve('web/entry-compiler.js'),
    dest: resolve('packages/vue-template-compiler/build.js'),
    format: 'cjs',
    external: Object.keys(require('../packages/vue-template-compiler/package.json').dependencies)
  },
  // Web compiler (UMD for in-browser use).
  'web-compiler-browser': {
    entry: resolve('web/entry-compiler.js'),
    dest: resolve('packages/vue-template-compiler/browser.js'),
    format: 'umd',
    env: 'development',
    moduleName: 'VueTemplateCompiler',
    plugins: [node(), cjs()]
  },
  // Web server renderer (CommonJS).
  'web-server-renderer-dev': {
    entry: resolve('web/entry-server-renderer.js'),
    dest: resolve('packages/vue-server-renderer/build.dev.js'),
    format: 'cjs',
    env: 'development',
    external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  },
  'web-server-renderer-prod': {
    entry: resolve('web/entry-server-renderer.js'),
    dest: resolve('packages/vue-server-renderer/build.prod.js'),
    format: 'cjs',
    env: 'production',
    external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  },
  'web-server-renderer-basic': {
    entry: resolve('web/entry-server-basic-renderer.js'),
    dest: resolve('packages/vue-server-renderer/basic.js'),
    format: 'umd',
    env: 'development',
    moduleName: 'renderVueComponentToString',
    plugins: [node(), cjs()]
  },
  'web-server-renderer-webpack-server-plugin': {
    entry: resolve('server/webpack-plugin/server.js'),
    dest: resolve('packages/vue-server-renderer/server-plugin.js'),
    format: 'cjs',
    external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  },
  'web-server-renderer-webpack-client-plugin': {
    entry: resolve('server/webpack-plugin/client.js'),
    dest: resolve('packages/vue-server-renderer/client-plugin.js'),
    format: 'cjs',
    external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
  },
  // Weex runtime factory
  'weex-factory': {
    weex: true,
    entry: resolve('weex/entry-runtime-factory.js'),
    dest: resolve('packages/weex-vue-framework/factory.js'),
    format: 'cjs',
    plugins: [weexFactoryPlugin]
  },
  // Weex runtime framework (CommonJS).
  'weex-framework': {
    weex: true,
    entry: resolve('weex/entry-framework.js'),
    dest: resolve('packages/weex-vue-framework/index.js'),
    format: 'cjs'
  },
  // Weex compiler (CommonJS). Used by Weex's Webpack loader.
  'weex-compiler': {
    weex: true,
    entry: resolve('weex/entry-compiler.js'),
    dest: resolve('packages/weex-template-compiler/build.js'),
    format: 'cjs',
    external: Object.keys(require('../packages/weex-template-compiler/package.json').dependencies)
  }
}

function genConfig (name) {
  const opts = builds[name]
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [
      flow(),
      alias(Object.assign({}, aliases, opts.alias))
    ].concat(opts.plugins || []),
    output: {
      file: opts.dest,
      format: opts.format,
      banner: opts.banner,
      name: opts.moduleName || 'Vue'
    },
    onwarn: (msg, warn) => {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    }
  }

  // built-in vars
  const vars = {
    __WEEX__: !!opts.weex,
    __WEEX_VERSION__: weexVersion,
    __VERSION__: version
  }
  // feature flags
  Object.keys(featureFlags).forEach(key => {
    vars[`process.env.${key}`] = featureFlags[key]
  })
  // build-specific env
  if (opts.env) {
    vars['process.env.NODE_ENV'] = JSON.stringify(opts.env)
  }
  config.plugins.push(replace(vars))

  if (opts.transpile !== false) {
    config.plugins.push(buble())
  }

  Object.defineProperty(config, '_name', {
    enumerable: false,
    value: name
  })

  return config
}

if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

  • 这个config文件在最后一行暴露了一个方法，叫 getAllBuilds，它是一个函数

    • 这个函数做了什么事情呢？ Object.keys(builds).map(genConfig)
    • 拿到一个keys的数组，然后我们再通过map方法调用这个 genConfig 函数

  • 我们来看这个 builds 参数

    • 上面代码大篇幅定义了 builds 对象
    • 里面每个key对应的也都是一个对象
      • 通过注释可知，是不同版本的vuejs的编译配置
      • 每一个编译配置它都会有一个 entry 顾名思义就是入口
      • dest 顾名思义就是目标
      • 还有一个format(输出格式) 和 banner(头部注释)

  • 这个 entry 它是通过 resolve 这个函数，然后传一个字符串(文件地址)

    js 复制代码 
    const aliases = require('./alias')
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

    • resolve 函数，它就是接收一个参数。这个字符参数会通过split('/') 拿到第一个值作为base

    • 之后判断 aliases 这个 aliases 也是 require 进来的，看下这个 alias 文件

      js 复制代码 
      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'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

    • 可见，alias 文件提供别名到真实地址文件的映射

    • 回到最上面的 resolve 方法内部，最终返回了从参数到真实地址的字符串

  • dest 这个key也走的 resolve, 只不过走到了 最终 else 的环节里

  • format 是构建出来的文件格式，cjs 对应的就是 xxx.common.js

    • cjs 最终生成的js文件是 module.exports = Vue
    • es 最终生成的文件是 export default Vue
    • umd 最终生成的文件是 符合 umd 规范的 vuejs 文件
    • ...

  • 所以，很显然

    • 上面 web 对应的真实的路径是 path.resolve(__dirname, '.../src/platforms/web')，这个路径就找到了 Vue.js 源码的 web 目录
    • 然后 resolve 函数通过 path.resolve(aliases[base], p.slice(base.length + 1)) 找到了最终路径
    • 它就是 Vue.js 源码 web 目录下的 entry-runtime.js。因此，web-runtime-cjs 配置对应的入口文件就找到了
    • 它经过 Rollup 的构建打包后，最终会在 dist 目录下生成 vue.runtime.common.js

  • banner 是自己设计的头部注释

    • 里面可以 写八本，日期，作者，license 等信息

  • 再回到我们的config，最终通过 Object.keys(builds).map(genConfig)

    • 拿到这个所有keys 的一个数组，然后这个这个数组我们去调用这个 genConfig 函数
    • genConfig 就拿到每个key，然后它就会拿到这个对象，再通过 build[name]
    • name 是key对应的这个对象，构造出一个新的 config 对象
      • 里面有 input, external, plugins, output, ...
    • 这个最终的 config 对象才是 rollup 打包所需要的配置结构
    • 这是个适配器来进行的转换工作

  • 返回到 let builds = require('./config').getAllBuilds()

    • 这里的 builds 是一个数组

  • 之后进行 if (process.argv[2]) {} 的判断

    • 提取到命令行输出的参数，如 -- weex 等
    • 如果有参数，则会通过 filter 来过滤一些不需要的流程

  • 最终编译的时候，就调用 build(builds) 在里面进行一个个的编译

    • 里面定义一个 next() 函数，里面调用 buildEntry, 之后递归，里面有个 built 计数器
    • 而 buildEntry 传入最终的config， config作为最终rollup的参数进行构建
    • 编译完之后得到了 bundle, 通过了 bundle.generate 传入 output
    • 之后拿到 code, 判断环境，分别做处理，最终通过 write 方法，得到构建好的文件
    • 在生成的过程中，打下一些 log 信息

  • 这是整个的构建流程

4 ） Runtime Only VS Runtime + Compiler

  • 通常我们利用 vue-cli 去初始化我们的 Vue.js 项目的时候
  • 会询问我们用 Runtime Only 版本的还是 Runtime + Compiler 版本
  • 下面我们来对比这两个版本

4.1 ） Runtime Only

  • 我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript
  • 在浏览器里，是不认识 .vue文件的，所以需要一个编译的过程，在编译阶段，会把 template 模板编译成 render 函数
  • 最终编译后的，就是一个 render 函数的版本，所以vue是不带编译的，也就是运行时不带编译
  • 所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量

4.2 ）Runtime + Compiler

  • 我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，如下所示：

    js 复制代码 
    // 需要编译器的版本
new Vue({
  template: '<div>{{ hi }}</div>'
})

  • 这种一定要选择 Runtime + Compiler 版本

    js 复制代码 
    // 这种情况不需要
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

  • 这种就不需要

  • 而 .vue文件 是在编译过程中，通过 vue-loader 处理的

  • 所以我们写的 .vue 文件在运行的时候已经编译成 js 函数了，并且模板部分已经编译成 render 函数了

  • 在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数

  • 那么这个编译过程会发生运行时，需要带有编译器的版本

  • 很显然，这个编译过程对性能会有一定损耗，所以通常开发阶段更推荐使用 Runtime-Only 的 Vue.js

    • 一种是运行时的性能优化，一种是编译出来的体积会更轻量

5 ）总结

  • 我们可了解到 Vue.js 的构建打包过程，也知道了不同作用和功能的 Vue.js 它们对应的入口以及最终编译生成的 JS 文件
  • 在实际开发过程中我们会用 Runtime Only 版本开发比较多
  • 但为了分析 Vue 的编译过程，我们重点分析的源码是
相关推荐
qq_3643717215 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
susu10830189116 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
天天进步20159 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒9 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员9 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
想自律的露西西★10 小时前
用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳10 小时前
vue3:瀑布流
前端·javascript·vue.js
程序媛-徐师姐12 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
余道各努力，千里自同风12 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10Docker 夺命连环 15 问