Vue系列---源码构建过程

Posted 2020-12-01 tugenhua0707

在了解源码如何构建之前，我们有必要了解下 项目中一个简单的目录结构如下：

|---- vue
|  |---- dist               # 打包后的存放文件目录
|  |---- scripts            # 存放构建相关的代码
|  |  |--- alias.js
|  |  |--- build.js
|  |  |--- config.js        # 配置文件
|  |  |--- ..... 其他的更多
|  |---- src                # src目录是vue核心代码库
|  |  |--- compiler
|  |  |--- core
|  |  |--- platforms
|  |  | |--- web            # web平台
|  |  | | |--- compiler
|  |  | | |--- runtime
|  |  | | |--- server
|  |  | | |--- util
|  |  | | |--- entry-runtime-with-compiler.js  # 运行+模板编译的入口文件
|  |  | |--- weex
|  |  |--- server
|  |  |--- sfc
|  |  |--- shared
|  |---- package.json

如上只是一个非常简单的一个目录，为了节约篇幅，只是把入口构建的相关的目录画出来。

我们看任何库相关的代码的第一步先把视线转移到 package.json 中来。然后看下 "scripts" 这个，如下：

{
  ......
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
    "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
    "test:unit": "karma start test/unit/karma.unit.config.js",
    "test:cover": "karma start test/unit/karma.cover.config.js",
    "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js",
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
    "test:types": "tsc -p ./types/test/tsconfig.json",
    "lint": "eslint src scripts test",
    "flow": "flow check",
    "sauce": "karma start test/unit/karma.sauce.config.js",
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "release": "bash scripts/release.sh",
    "release:weex": "bash scripts/release-weex.sh",
    "release:note": "node scripts/gen-release-note.js",
    "commit": "git-cz"
  },
  .....
}

这边我们只要关注 "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap", 这块就可以了，其他的命令也是类似的。如上使用的 rollup 进行打包，然后我们会看到命令中有 scripts/config.js 这个配置文件，因此我们需要把视线找到 这个 scripts/config.js 这个文件上来。

scripts/config.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)
  }
}

const builds = {
  .....
  ‘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
  },
  .....
};

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)
      }
    }
  }

  .... 

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

然后把视线移到最后的代码，if条件判断 process.env.TARGET 是否存在，存在的话，就执行 getConfig(process.env.TARGET) 这个函数，最后把结果导出 module.exports = genConfig(process.env.TARGET);  从命令行中，我们可以看到 process.env.TARGET 值为：‘web-full-dev‘; 因此 const opts = builds[‘web-full-dev‘]; 因此最后 opts的值变为如下：

const opts = {
  entry: resolve(‘web/entry-runtime-with-compiler.js‘),
  dest: resolve(‘dist/vue.js‘),
  format: ‘umd‘,
  env: ‘development‘,
  alias: { he: ‘./entity-decoder‘ },
  banner
}

再看看 resolve 函数如下：

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 函数，首先会获取基路径，比如 ‘web/entry-runtime-with-compiler.js‘ 的基路径就是 ‘web‘,因此 base = ‘web‘; 然后判断 if (aliases[base]) {} aliases 是否有 key为web的，如果有的话，直接返回：return path.resolve(aliases[base], "entry-runtime-with-compiler.js"); 同理其他的也一样。

我们再结合下面的 alias.js 代码

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.js 代码可以理解为如下：

module.exports = {
  vue: ‘项目的根目录‘ + ‘/src/platforms/web/entry-runtime-with-compiler‘,
  compiler: ‘项目的根目录‘ + ‘/src/compiler‘,
  core: ‘项目的根目录‘ + ‘/src/core‘,
  shared: ‘项目的根目录‘ + ‘/src/shared‘,
  web: ‘项目的根目录‘ + ‘/src/platforms/web‘,
  weex: ‘项目的根目录‘ + ‘/src/platforms/weex‘,
  server: ‘项目的根目录‘ + ‘/src/server‘,
  sfc: ‘项目的根目录‘ + ‘/src/sfc‘
};

分析可知最后的opts对象变为如下：

const opts = {
  entry: ‘项目的根目录‘ + ‘/src/platforms/web/entry-runtime-with-compiler.js‘,
  dest: ‘项目的根目录‘ + ‘/dist/vue.js‘,
  format: ‘umd‘,
  env: ‘development‘,
  alias: { he: ‘./entity-decoder‘ },
  banner
};

因此 genConfig 函数内的config对象值变为如下：

const config = {
  input: ‘项目的根目录‘ + ‘/src/platforms/web/entry-runtime-with-compiler.js‘,
  external: ‘‘,
  plugins: [
    flow(),
    alias(Object.assign({}, aliases, opts.alias))
  ].concat(opts.plugins || []),
  output: {
    file: ‘项目的根目录‘ + ‘/dist/vue.js‘,
    format: ‘umd‘,
    banner: ‘‘,
    name: opts.moduleName || ‘Vue‘
  },
  onwarn: (msg, warn) => {
    if (!/Circular/.test(msg)) {
      warn(msg)
    }
  }
}; 

如上代码打包的含义可以理解为如下：

找到 ‘项目的根目录‘ + ‘/src/platforms/web/entry-runtime-with-compiler.js‘, 路径下的js文件 打包到‘项目的根目录‘ + ‘/dist/vue.js‘,目录下的 vue.js 文件。因此我们需要把视线转移到 ‘/src/platforms/web/entry-runtime-with-compiler.js‘ 文件内了。该文件就是我们的vue的入口文件。

entry-runtime-with-compiler.js 基本的代码如下：

/* @flow */

import config from ‘core/config‘
import { warn, cached } from ‘core/util/index‘
import { mark, measure } from ‘core/util/perf‘

import Vue from ‘./runtime/index‘
import { query } from ‘./util/index‘
import { compileToFunctions } from ‘./compiler/index‘
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from ‘./util/compat‘

....

const mount = Vue.prototype.$mount;

Vue.prototype.$mount = function() {
  .....
};

....

export default Vue;

如上其他的代码，我们这边先不管，我们先看的 import Vue from ‘./runtime/index‘ 这句代码，为什么要看这句代码呢，那是因为 它引入了该文件，并且直接使用 export default Vue; 导出该 Vue.因此我们会找到 src/platforms/web/runtime/index.js 代码如下：

import Vue from ‘core/index‘
import config from ‘core/config‘
import { extend, noop } from ‘shared/util‘
import { mountComponent } from ‘core/instance/lifecycle‘
import { devtools, inBrowser } from ‘core/util/index‘

import {
  query,
  mustUseProp,
  isReservedTag,
  isReservedAttr,
  getTagNamespace,
  isUnknownElement
} from ‘web/util/index‘

import { patch } from ‘./patch‘
import platformDirectives from ‘./directives/index‘
import platformComponents from ‘./components/index‘

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

.....

export default Vue;

该文件的代码也是一样，先引入 import Vue from ‘core/index‘ 文件后，然后导出 export default Vue;

因此我们继续找到 src/core/index.js 代码如下：

import Vue from ‘./instance/index‘
import { initGlobalAPI } from ‘./global-api/index‘
import { isServerRendering } from ‘core/util/env‘
import { FunctionalRenderContext } from ‘core/vdom/create-functional-component‘

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, ‘$isServer‘, {
  get: isServerRendering
})

Object.defineProperty(Vue.prototype, ‘$ssrContext‘, {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, ‘FunctionalRenderContext‘, {
  value: FunctionalRenderContext
})

Vue.version = ‘__VERSION__‘

export default Vue;

如上代码，我们主要看 import Vue from ‘./instance/index‘; 和一些全局API import { initGlobalAPI } from ‘./global-api/index‘ 的代码。

首先我们看 src/core/instance/index.js 代码如下：

import { initMixin } from ‘./init‘
import { stateMixin } from ‘./state‘
import { renderMixin } from ‘./render‘
import { eventsMixin } from ‘./events‘
import { lifecycleMixin } from ‘./lifecycle‘
import { warn } from ‘../util/index‘

function Vue (options) {
  if (process.env.NODE_ENV !== ‘production‘ &&
    !(this instanceof Vue)
  ) {
    warn(‘Vue is a constructor and should be called with the `new` keyword‘)
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue;

如上代码，我们终于看到Vue的构造函数了，我们在Vue页面初始化 new Vue({}); 这样调用的时候，就会调用该构造函数，而我们传入的参数就传给了options。该函数首先会判断是不是正式环境 及 是否使用 new 来实列Vue。
最后会调用 this._init(options) 该函数。该函数在 src/core/instance/init.js 里面，也就是我们下面的initMixin(Vue) 函数调用初始化了。它会把一些方法挂载到Vue的原型上，比如 _init()方法，如下代码：
Vue.prototype._init = function() {} 这样的。

下面我们继续来看下该方法，在 src/core/instance/init.js 代码如下：

/* @flow */

import config from ‘../config‘
import { initProxy } from ‘./proxy‘
import { initState } from ‘./state‘
import { initRender } from ‘./render‘
import { initEvents } from ‘./events‘
import { mark, measure } from ‘../util/perf‘
import { initLifecycle, callHook } from ‘./lifecycle‘
import { initProvide, initInjections } from ‘./inject‘
import { extend, mergeOptions, formatComponentName } from ‘../util/index‘

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    .......
  }
}

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  .....
}

export function resolveConstructorOptions (Ctor: Class<Component>) {
  ....
}

如上就是 init.js 代码。

initGlobalAPI

下面我们再看下 src/core/global-api/index.js, Vue在初始化过程中，不仅给他的原型prototype上扩展方法，还会给Vue这个对象本身扩展很多全局的静态方法。那么扩展的全局的静态方法和属性就是在该函数内做的。在 src/core/global-api 其实有如下js文件

|--- vue
| |--- src
| | |--- core
| | | |--- global-api
| | | | |--- assets.js
| | | | |--- extends.js
| | | | |--- index.js
| | | | |--- mixin.js
| | | | |--- use.js

src/core/global-api/index.js 源码可以去看vue(v2.6.10)上去看了。在后面我们会逐渐讲解挂载了哪些全局属性和原型方法的。