資訊專(zhuān)欄INFORMATION COLUMN
摘要：因?yàn)閮H僅包含運(yùn)行時(shí)編譯比完整版少的代碼體積，如果你需要使用完整包也是可以的，你需要調(diào)整配置。顯式的改變運(yùn)行時(shí)引用包模塊在引入時(shí)做了什么看完了這幾個(gè)文件的用途之后我們?cè)賮?lái)看看引入的時(shí)候做了什么帶著這個(gè)疑問(wèn)我們繼續(xù)探索。
Vue Runtime Full Analysis - Import Vue Module 回顧系列文章之《VueCLI3上手》
上一節(jié) 《Vue運(yùn)行時(shí)全解析 - VueCLI3上手（一）》中介紹了VueCLI3的一些信息，包括以下幾點(diǎn)：
官方主推VueCLI3的原因
CLI3的核心概念
CLI3的安裝
CLI3簡(jiǎn)單創(chuàng)建一個(gè)項(xiàng)目
Vue ui的使用介紹
使用CLI3按照舊版方式創(chuàng)建項(xiàng)目的方法
安裝插件vuex,router方法
修改項(xiàng)目配置的方式
使用VueCLI3的serve命令 打開(kāi)一個(gè)vue文件
閱讀本節(jié)你能學(xué)到什么？
查看項(xiàng)目的配置文件的2種方法
vue inspect 命令方式
vue ui 可視化方式
在腳手架項(xiàng)目中引入vue的方式
腳手架項(xiàng)目入口文件的位置
Webpack 引入模塊的機(jī)制
vue 編譯后的文件的用途
引入的vue做了哪些前置工作
導(dǎo)出配置文件開(kāi)始分析之前，我們先把項(xiàng)目配置文件先導(dǎo)出來(lái)，以做分析備用，在VueCLI3配置的文檔中可以找到倆中方式找到配置內(nèi)容：
inspect命令：通過(guò)下面命令將項(xiàng)目的默認(rèn)配置導(dǎo)出到文件中，這里命名為preset-default-vue-cli-3.js
yanyue$ vue inspect > preset-default-vue-cli-3.js
vue ui 的inspect面板，點(diǎn)擊運(yùn)行可以獲取到。
可以通過(guò) vue ui 啟動(dòng)可視化配置界面 如下圖，在這里可以看到 task(任務(wù)) 面板，task面板有4個(gè)task, 選擇 inspect 面板能夠看到 run(運(yùn)行按鈕) ，點(diǎn)擊后，便能夠查看到輸出的配置信息，在這里查看到的是文本方式查看，由于內(nèi)容較多，像我這次要分析，需要折疊代碼看到這個(gè)配置的整體信息，一般情況，我們不會(huì)所有配置都去修改，在這里查閱非常方便，而且運(yùn)行一次，下次切換過(guò)來(lái)這個(gè)內(nèi)容還在。
就僅僅配置文件足有1000+行... 從這里看vue也是花了大功夫把各種工具的配置文件都進(jìn)行了優(yōu)化整合，并提供統(tǒng)一的修改方式，之后我們會(huì)講到如何在項(xiàng)目中修改配置。
項(xiàng)目引入vue的方式要知道項(xiàng)目是怎么引入vue框架的，我們先從最開(kāi)始了解一下的程序入口main.js文件，因?yàn)関ue的引入時(shí)在這個(gè)文件中，那我們先看看這個(gè)文件被引入的過(guò)程是怎么工作的？
main.jssrc/main.js是整個(gè)程序的入口文件，在上面導(dǎo)出的配置文件中我們搜索entry這個(gè)關(guān)鍵字，可以看到下圖的配置信息：
entry: {
app: [
"./src/main.js"
]
}
VueCLI3項(xiàng)目的入口文件就是通過(guò)該配置字段來(lái)定義輸入給 webpack 的，最后通過(guò) HtmlWebpackPlugin 插件將打包好的腳本注入進(jìn)根據(jù)public中的index.html模板生成的新的html文件中, 如下面配置中插件中的template選項(xiàng)：
new HtmlWebpackPlugin({
templateParameters: function () { /* omitted long function */ },
template: "path/to/project-root/public/index.html"
})
將vue引入項(xiàng)目
第一行代碼
import Vue from "vue"
使用了ES2015的語(yǔ)法將vue的運(yùn)行時(shí)作為依賴(lài)模塊引入程序。
我們關(guān)注一下模塊細(xì)節(jié)使用VueCLI3安裝的項(xiàng)目，項(xiàng)目的基本依賴(lài)（包括babel, vue等）已經(jīng)被安裝好了，我們?nèi)ode_modules目錄中找到vue模塊目錄，從目錄下package.json文件能夠看到如下圖：
從圖中能看到 vue對(duì)多種引入方式以不同文件提供支持，包括符合CommonJS模塊規(guī)范的 vue.runtime.common.js 、符合ES Module模塊規(guī)范的vue.runtime.esm.js和符合UMD模塊規(guī)范的 vue.js以及支持TypeScript的類(lèi)型定義文件index.d.ts。
我們的項(xiàng)目使用webpack打包各個(gè)模塊，webpack優(yōu)先會(huì)選取ES模塊方式引入包(原因：webpack中的處理 參考：roollup相關(guān)的解釋)
在web環(huán)境中，webpack會(huì)依據(jù)resolve下的mainFields字段中配置的屬性所指定的位置讀取文件，而當(dāng)前版本的vue項(xiàng)目配置中配置了pkg.module和pkg.main這倆個(gè)位置，所以webpack優(yōu)先讀取了module指向的dist/vue.runtime.esm.js文件，忽略了pkg.main字段指向的位置文件。
編譯后的文件上面說(shuō)到了vue.runtime.esm.js這個(gè)文件被webpack作為vue項(xiàng)目提供的vue模塊引入到我們的項(xiàng)目中，但是從安裝的vue模塊目錄的dist下卻發(fā)現(xiàn)了好幾個(gè)文件，如下圖：
以下大多參考官方文檔內(nèi)容，并做了簡(jiǎn)單解釋性翻譯：
解釋編譯后的文件Explanation of Build Files
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | ||
| Runtime-only (production) | vue.runtime.min.js |
Full: builds that contains both the compiler and the runtime.
完整版，包含 compiler 和 runtime
Compiler: code that is responsible for compiling template strings into JavaScript render functions.
Compiler : 負(fù)責(zé)將模板字符串編譯成render函數(shù)
注意: 請(qǐng)留意后面會(huì)講到的render函數(shù)
Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
runtime: 負(fù)責(zé)創(chuàng)建vue實(shí)例， 渲染和調(diào)整虛擬DOM等，基本上等效于除去compiler的所有一切。
UMD: UMD builds can be used directly in the browser via a
類(lèi)型檢測(cè)定義
瀏覽器環(huán)境檢測(cè) Browser environment sniffing
虛擬DOM的實(shí)現(xiàn)定義
globals MessageChannel
初始化數(shù)據(jù)方法定義
initState
initProps
initData
initComputed
initMethods
initWatch
initRender
initMixin
初始化調(diào)用
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
這一步vue做了很多的前期準(zhǔn)備工作，我們?cè)诤竺嬲鹿?jié)還會(huì)細(xì)化...
本節(jié)結(jié)束這一節(jié)我們只關(guān)注最基礎(chǔ)的這一塊，下一節(jié)，我們將繼續(xù)關(guān)注細(xì)節(jié)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97888.html
摘要：可以譯作運(yùn)行時(shí)過(guò)程全面分析和解析，這個(gè)全面分析涉及到比較基礎(chǔ)的或者復(fù)雜的重要前端概念和中的概念等。注本篇是運(yùn)行時(shí)全解析系列文章的第一篇，首次發(fā)表于，友善轉(zhuǎn)載蟹蟹。附更多內(nèi)容請(qǐng)參考核心維護(hù)者蔣豪群同學(xué)的的公開(kāi)課視頻 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以譯作vue...
摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的元素是更新之前的鉤子函數(shù)說(shuō)明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴(lài)于的操作。鉤子函數(shù)說(shuō)明實(shí)例銷(xiāo)毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶(hù)界面(UI)的漸進(jìn)式JavaScript框架 庫(kù)和框架的區(qū)別 我們所說(shuō)的前端框架與庫(kù)的區(qū)別？ Library 庫(kù)，本質(zhì)上是一...
摘要：樣式通過(guò)標(biāo)簽包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加，如要引入外部文件，首先需給項(xiàng)目安裝依賴(lài)包，打開(kāi)，進(jìn)入項(xiàng)目目錄，輸入回車(chē)。 showImg(https://segmentfault.com/img/remote/1460000013235090); （一）安裝node.js 首先需要安裝node環(huán)境，可以直接到中文官網(wǎng)http://nodejs.cn/...
摘要：除此之外，你還可以運(yùn)行打包命令此時(shí)之前說(shuō)的打包生成的文件應(yīng)該就生成了，或者選擇用瀏覽器打開(kāi)應(yīng)該也可以看見(jiàn)和剛剛一樣的結(jié)果。而如何創(chuàng)建一個(gè)對(duì)象是知道，因此開(kāi)頭引入了，并使用它常見(jiàn)了一個(gè)對(duì)象，然后這個(gè)對(duì)象就管理了這一塊區(qū)域。 作者：心葉時(shí)間：2018-04-25 16:33 本篇最終項(xiàng)目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...
閱讀 3354·2021-11-22 15:22
閱讀 2881·2021-10-12 10:12
閱讀 2173·2021-08-21 14:10
閱讀 3842·2021-08-19 11:13
閱讀 2858·2019-08-30 15:43
閱讀 3241·2019-08-29 16:52
閱讀 460·2019-08-29 16:41
閱讀 1447·2019-08-29 12:53
