1弄慰、獲取源碼
通過這個地址：https://github.com/vuejs/vue 獲取源碼
2渺杉、目錄說明
2.1 一級目錄說明：
目錄1.png
2.2 src目錄說明：
目錄2.png
3脾歇、入口
Vue.js 源碼是基于 Rollup 構(gòu)建的髓考，它的構(gòu)建相關(guān)配置都在 scripts 目錄下从祝。
通過dev腳本错邦，package.json文件
"scripts": {
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
"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腳本中 -c scripts/config.js 指明配置文件所在腻豌，參數(shù) TARGET:web-full-dev 指明輸出文件配置項家坎。
// Runtime+compiler development build (Browser)
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'), // 構(gòu)建的入口 JS 文件地址
dest: resolve('dist/vue.js'),//構(gòu)建后的 JS 文件地址
format: 'umd',// 構(gòu)建的格式
env: 'development',
alias: { he: './entity-decoder' },
banner
},
cjs表示構(gòu)建出來的文件遵循 CommonJS 規(guī)范，es表示構(gòu)建出來的文件遵循 ES Module 規(guī)范吝梅。umd表示構(gòu)建出來的文件遵循 UMD 規(guī)范虱疏。
另外，我們觀察dist目錄下會發(fā)現(xiàn)很多版本苏携，vue-runtime.js,vue-runtime.common.js等等他們之間有什么區(qū)別做瞪？
runtime：僅包含運行時，不包含編譯器
common：cjs規(guī)范右冻，用于webpack1
esm：ES模塊装蓬，用于webpack2+
umd: universal module definition，兼容cjs和amd纱扭，用于瀏覽器
為了分析 Vue 的編譯過程牍帚，我們重點分析的是 Runtime + Compiler 的 Vue.js
通過 scripts/config.js 和 scripts/alias
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)
}
}
找到入口 src/platforms/web/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 idToTemplate = cached(id => {
const el = query(id)
return el && el.innerHTML
})
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
let template = options.template
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
return mount.call(this, el, hydrating)
}
/**
* Get outerHTML of elements, taking care
* of SVG elements in IE as well.
*/
function getOuterHTML (el: Element): string {
if (el.outerHTML) {
return el.outerHTML
} else {
const container = document.createElement('div')
container.appendChild(el.cloneNode(true))
return container.innerHTML
}
}
Vue.compile = compileToFunctions
export default Vue
