建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Vite 的插件應(yīng)用
使用插件：https://cn.vitejs.dev/guide/using-plugins.html
成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供紅河哈尼網(wǎng)站建設(shè)、紅河哈尼做網(wǎng)站、紅河哈尼網(wǎng)站設(shè)計(jì)、紅河哈尼網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、紅河哈尼企業(yè)網(wǎng)站模板建站服務(wù)，十載紅河哈尼做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
因?yàn)?Vite 依賴(lài)于 Rollup ，這意味著 Vite 可以利用 Rollup 插件的強(qiáng)大生態(tài)系統(tǒng)。很多功能性的支持，在 Rollup 項(xiàng)目中需要添加插件，而在 Vite 為了能夠提供開(kāi)箱即用的體驗(yàn)，已經(jīng)內(nèi)建支持了。在前面的功能概覽講解中，我們已經(jīng)看到了，你可以具體去看：https://cn.vitejs.dev/guide/features.html
除此之外，官方也提供了一系列插件，比如 Vue 3 單文件組件的解析插件：@vitejs/plugin-vue。在初始化項(xiàng)目完成后，在配置文件 Vite.config.js 的默認(rèn)配置中就能看到：
而如果使用 Vite 構(gòu)建一個(gè) React 項(xiàng)目，同樣在配置文件中，能夠看到對(duì) React 代碼支持的插件被引入使用：
這里也額外插一句，前面說(shuō)過(guò)，在構(gòu)建項(xiàng)目時(shí)，你可以通過(guò)在命令行添加指定模板的方式，構(gòu)建不同框架模板的項(xiàng)目。官方提供了很多模板，而社區(qū)提供了更多的模板類(lèi)型。比如很多小伙伴想使用 Vite 開(kāi)發(fā) Vue2 的項(xiàng)目，就可以到社區(qū)模板中，找到對(duì)應(yīng)的模板，社區(qū)模板列表：https://github.com/vitejs/awesome-vite#templates
我們以 vite-vue2-starter 模板為例，找到具體的模板以后，我們就可以使用degit:https://github.com/Rich-Harris/degit 之類(lèi)的工具，使用社區(qū)模版來(lái)搭建項(xiàng)目了，具體操作如下：
- npx degit matt-auckland/vite-vue2-starter myvitevue2
項(xiàng)目搭建搭建成功后，我們打開(kāi)配置文件 Vite.config.js ，其中默認(rèn)配置中能夠看到，依然使用了插件來(lái)解析 Vue2 代碼的代碼，使其能夠正常運(yùn)行：
說(shuō)到底，Vite 之所以能夠構(gòu)建不同框架的項(xiàng)目，就是依賴(lài)于插件機(jī)制的。除此之外，我們還可以使用插件，在開(kāi)發(fā)階段或打包階段完成不同的需求。
插件的基本使用
低版本瀏覽器兼容插件
比如，Vite 構(gòu)建的項(xiàng)目，打包默認(rèn)依然使用 ES 模塊化，即便是 Vue2 開(kāi)發(fā)的項(xiàng)目也是一樣，如果想讓項(xiàng)目運(yùn)行在 IE11 這樣的低版本瀏覽器中，可以按下面這樣，使用官方插件 @vitejs/plugin-legacy，打包后的結(jié)果是不需要插件功能的。因此，使用開(kāi)發(fā)依賴(lài)安裝插件：
- $ npm i @vitejs/plugin-legacy -D
安裝完成后，在配置文件 vite.config.js 中，引入并使用插件：
如果你對(duì) Rollup 比較熟悉，你會(huì)發(fā)現(xiàn)，Vite 中插件的使用規(guī)則就是 Rollup 的插件使用規(guī)則。
此時(shí)，我們就可以使用 npm run build 打包項(xiàng)目了，使用插件打包和不使用插件打包，結(jié)果具有非常明顯的差異。
官方提供的插件并不多，插件：https://cn.vitejs.dev/plugins/，我們?nèi)ド鐓^(qū)尋找到大量且功能豐富的插件：https://github.com/vitejs/awesome-vite#plugins
MarkDown 解析插件
現(xiàn)在我有個(gè)需求，解析 md 文檔并展示，可以使用 vite-plugin-md
安裝插件：
- npm ivite-plugin-md -D
\vite.config.js , 引入并使用插件：
對(duì)于 Vite 的基本用法，到這里也就差不多了。那么 Vite 對(duì)于開(kāi)發(fā)者如此友好又這么強(qiáng)大，而我現(xiàn)在的項(xiàng)目還在使用傳統(tǒng)的方式開(kāi)發(fā)，灰常不開(kāi)森，我能在傳統(tǒng)項(xiàng)目中使用 Vite 嗎?如果你剛認(rèn)識(shí) Vite，第一感覺(jué)好像不太可能，但是，當(dāng)你真正認(rèn)識(shí)了 Vite，又有什么不可能呢，其實(shí)，嗖易賊啦~~
先找一個(gè)基于 vue-cli 搭建的項(xiàng)目，然后就……
本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。
分享文章：Vite的插件機(jī)制：插件應(yīng)用和基本使用
URL網(wǎng)址：http://www.5511xx.com/article/cdogeeo.html
