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

我心飞翔 分类:vue

之所以选择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

// package.json
{
    "scripts": {
        "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
        //...
    }
}

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

// 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,即走下面配置,构建产物中便不提供在运行阶段进行模板编译的能力。

// 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

回复

我来回复
  • 暂无回复内容