Vue 源碼分析（ 一 ）目錄結(jié)構(gòu)、版本、入口

1、Vue 源碼目錄結(jié)構(gòu)

dist：打包之后生成的結(jié)果目錄 examples：代碼示例 scripts：配置文件 src：源代碼目錄compiler: 編譯相關(guān) （將template模板轉(zhuǎn)換成render函數(shù)）core：核心components：定義了自帶的 keep-alive 組件global-api：Vue內(nèi)的靜態(tài)方法instance：Vue構(gòu)造函數(shù)、初始化、生命周期observer：響應(yīng)式util：公共成員vdom：虛擬domplatforms：平臺(tái)相關(guān)web：web 平臺(tái)相關(guān)代碼weex：app 相關(guān)代碼server：服務(wù)端渲染代碼sfc：將單文件組件轉(zhuǎn)化為js對象 test：單元測試

2、Vue的不同構(gòu)建版本

Vue 版本說明

說明

• 完整版：同時(shí)包含 編譯器 和 運(yùn)行時(shí) 的版本
• 編譯器：用于將模板字符串編譯為 JavaScript 渲染函數(shù)的代碼，體積大、效率低（ 約3000行代碼）
• 運(yùn)行時(shí)：用于創(chuàng)建 Vue 實(shí)例、渲染并處理虛擬DOM等的代碼，體積小、效率高
• UMD：UMD 版本通用的模板版本，支持多種模塊方式，vue.js 默認(rèn)文件就是運(yùn)行時(shí) + 編譯器的 UMD 版本，可以在html中引入 vue.js 來使用
• CommonJS（cjs）：CommonJS 版本用來配合老的打包工具比如 Browserify 或 webpack 1
• MS Module：從 2.6 開始 Vue 會(huì)提供兩個(gè) ES Modules（ESM），為現(xiàn)代打包工具提供的版本
• ESM 格式被設(shè)計(jì)為可以被靜態(tài)分析的，所以可以利用這一點(diǎn)進(jìn)行 “tree-shaking”，并將用不到的代碼排除出最終的包。
• ES6 模塊與 CommonJS 模塊的差異 https://www.cnblogs.com/chenwenhao/p/12153332.html

運(yùn)行時(shí)與編譯器的區(qū)別

• 運(yùn)行時(shí)：由于此版本不包含編譯器，所以無法使用 template 進(jìn)行模板渲染
• 編譯器：將 template 轉(zhuǎn)換成 render 函數(shù)，所以可以使用 template 或者 render 函數(shù)進(jìn)行渲染

vue-cli 使用的 Vue 版本

• 使用命令 vue inspect > output.js ( 非有效 webpack 配置文件 )
• 在運(yùn)行以上命令后，在 output.js 文件中的 resolve.alias.vue$ 配置為 "vue/dist/vue.runtime.esm.js" ($為webpack語法，精確匹配的意思)
• 可以看出vue-cli 使用的是 運(yùn)行時(shí)的 ESM 版本

3、入口文件

npm run dev # "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev" # -environment TARGET:web-full-dev 設(shè)置了環(huán)境變量 TARGET

• 通過以上的命令，去 scripts/config.js 內(nèi)查看 rollup 配置對象，可以看到 genConfig 方法返回了配置對象 config

/* 導(dǎo)出配置 */ if (process.env.TARGET) {module.exports = genConfig(process.env.TARGET) } else {exports.getBuild = genConfigexports.getAllBuilds = () => Object.keys(builds).map(genConfig) }

• genConfig 方法內(nèi)通過 builds[name]返回基礎(chǔ)配置，在合并其他配置后返回最后的 config

function genConfig (name) { // process.env.TARGET = "web-full-dev"const opts = builds[name]const config = {input: opts.entry, // 入口文件位置...}...return config }

• 觀察 builds ，定義各種 模式 和 環(huán)境 的入口、出口、模塊化方式、模式等配置項(xiàng)
• 入口配置項(xiàng) entry，resolve('web/entry-runtime-with-compiler.js')

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},... }

• 通過 resolve 方法，返回當(dāng)前模式的絕對路徑， 并調(diào)用 path.resolve 方法合并 aliases[base] 和 p.slice(base.length + 1)

const aliases = require('./alias') // 拼裝 web 的 絕對路徑 const resolve = p => {// 根據(jù)路徑中的前半部分去alias中找別名// p => web/entry-runtime-with-compiler.js base => webconst base = p.split('/')[0]if (aliases[base]) {// __dirname + src/platforms/web + entry-runtime-with-compiler.jsreturn path.resolve(aliases[base], p.slice(base.length + 1))} else {return path.resolve(__dirname, '../', p)} }

• 通過 base === “web”，調(diào)用 resolve('src/platforms/web')
• resolve 方法返回 path.resolve(__dirname, '../','src/platforms/web' ) 返回當(dāng)前入口的絕對路徑

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

查找到入口文件 srcplatformswebentry-runtime-with-compiler.js

總結(jié)

以上是生活随笔為你收集整理的编译打包vue_Vue 源码分析（ 一 ）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。