vue源碼打包版本

這里選取我們開發(fā)中常見的幾個版本進(jìn)行說明。

1、vue(.runtime).global(.prod).js

• 在html頁面中通過 <script src=“...”> 標(biāo)簽直接使用。
• 通過CDN引入和npm下載的Vue就是這個版本。
• 會暴露一個全局的Vue來使用。

（.runtime）和（.pro）表示可選項(xiàng)，分別指特定的運(yùn)行時版本和生產(chǎn)版本。

2、vue(.runtime).esm-browser(.prod).js

• 用于通過原生ES模塊導(dǎo)入使用 (在瀏覽器中通過 <script type="module"> 來使用)。

3、vue(.runtime).esm-bundler.js

• 用于 webpack，rollup 和 parcel 等構(gòu)建工具。
• 構(gòu)建工具中默認(rèn)是vue.runtime.esm-bundler.js。
• 如果我們需要解析模板template，那么需要手動指定vue.esm-bundler.js。

這里就清楚了為什么webpack對vue代碼打包時，查看運(yùn)行的控制臺會出現(xiàn)下面一段警告信息：

// 默認(rèn)引入的是 vue.runtime.esm-bundler.js 版本
import { createApp } from 'vue'; 
// 修改為 vue.esm-bundler 版本
import { createApp } from 'vue/dist/vue.esm-bundler';

4、vue.cjs(.prod).js

• 服務(wù)器端渲染使用。
• 通過require()在Node.js中使用。

運(yùn)行時+編譯器 vs 僅運(yùn)行時

對應(yīng)著 runtime+compiler 和 runtime-only。

在Vue的開發(fā)過程中我們有三種方式來編寫DOM元素：

• 方式一：template模板的方式（之前經(jīng)常使用的方式）。
• 方式二：render函數(shù)的方式，使用h函數(shù)來編寫渲染的內(nèi)容。
• 方式三：通過.vue文件（SFC）中的template來編寫模板。

三種方式的模板如何處理：

• 方式二中的h函數(shù)可以直接返回一個虛擬節(jié)點(diǎn)，也就是Vnode節(jié)點(diǎn)。

而方式一和方式三的template都需要有 特定的代碼 來對其進(jìn)行解析：

• 方式三.vue文件中的template可以通過在vue-loader對其進(jìn)行編譯和處理。
• 方式一種的template我們必須要通過源碼中一部分代碼來進(jìn)行編譯。

因此Vue在選擇版本的時候分為 運(yùn)行時+編譯器 vs 僅運(yùn)行時

運(yùn)行時+編譯器 包含了對template模板的編譯代碼，更加完整，但是也更大一些；

僅運(yùn)行時 沒有包含對template版本的編譯代碼，相對更小一些。

Bundler 構(gòu)建功能標(biāo)志

針對以上警告，參閱https://github.com/vuejs/core/blob/main/packages/vue/README.md

貼出對于webpack構(gòu)建工具的配置示例：

附：VSCode對SFC文件的支持

SFC：single-file components (單文件組件)

plugin1：Vetur——從Vue2開發(fā)就一直在使用的，支持Vue的插件。

plugin2：Volar——官方推薦的插件（后續(xù)會基于Volar開發(fā)官方的VSCode插件）。

總結(jié)

到此這篇關(guān)于Vue打包后不同版本詳細(xì)解析的文章就介紹到這了,更多相關(guān)Vue打包后版本解析內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論