1. 「vue@2.6.11 源码分析」介绍和准备

2023-02-24 10:12:08 浏览数 (1)

之所以选择v2.6.11是因为当前项目（腾讯云医）使用uniapp框架（v2.0.1-32920211122003）进行微信小程序开发，uniapp框架提供的vue运行时就是基于v2.6.11进行改造的。

flow

Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查。

源码目录

v2.6.11 源码

  1. compiler: 编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，即使用包含构建功能的 Vue.js ，运行时构建的代码在该文件夹中
  2. core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。
  3. platform: Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。
  4. server: ssr相关
  5. sfc: 通常我们开发 Vue.js 都会借助 webpack 构建， 然后通过 .vue 单文件来编写组件。这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。
  6. shared: Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

源码构建

基于rollup

命令参考package.json，如 npm run dev

代码语言：javascript复制
// package.json
{
    "scripts": {
        "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
        //...
    }
}

rollup -c 后面跟配置文件的路径，通过后面—environment参数，scripts/config.js会返回rollup进行构建的配置信息，指定了entry、dist等等配置信息，从而进行源码构建。

代码语言：javascript复制
// scripts/config.js
const builds = {
  //...
  // 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
  },
}

module.exports = genConfig(process.env.TARGET)

Runtime Only 和 Runtime Compiler 两个版本

从config.js文件中看到提供了多种环境的配置，这里重点关注浏览器环境（browser）下的两个版本：Runtime Only VS Runtime Compiler

Runtime Only

我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。

比如我们可以指定TARGET:web-runtime-dev，即走下面配置，构建产物中便不提供在运行阶段进行模板编译的能力。

代码语言：javascript复制
// scripts/config.js
const builds = {
  //...
  // runtime-only build (Browser)
  'web-runtime-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.js'),
    format: 'umd',
    env: 'development',
    banner
  },
}

module.exports = genConfig(process.env.TARGET)

Runtime Compiler

因为在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。

总结

注意：后面我们使用 Runtime Compiler (npm run dev) 版本进行分析，构建入口web/entry-runtime-with-compiler.js → src/platforms/web/entry-runtime-with-compiler.js

vue.js 网站 webpack javascript 打包

0 人点赞