正文
Vue系列---源码构建过程(四)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在了解源码如何构建之前，我们有必要了解下 项目中一个简单的目录结构如下：
|---- 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)上去看了。在后面我们会逐渐讲解挂载了哪些全局属性和原型方法的。
