[[406694]]

Vite 的插件應(yīng)用

使用插件：https://cn.vitejs.dev/guide/using-plugins.html

因?yàn)?Vite 依賴于 Rollup ，這意味著 Vite 可以利用 Rollup 插件的強(qiáng)大生態(tài)系統(tǒng)。很多功能性的支持，在 Rollup 項(xiàng)目中需要添加插件，而在 Vite 為了能夠提供開箱即用的體驗(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 代碼支持的插件被引入使用：

這里也額外插一句，前面說過，在構(gòu)建項(xiàng)目時(shí)，你可以通過在命令行添加指定模板的方式，構(gòu)建不同框架模板的項(xiàng)目。官方提供了很多模板，而社區(qū)提供了更多的模板類型。比如很多小伙伴想使用 Vite 開發(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 之類的工具，使用社區(qū)模版來搭建項(xiàng)目了，具體操作如下：

npx degit matt-auckland/vite-vue2-starter  myvitevue2 

項(xiàng)目搭建搭建成功后，我們打開配置文件 Vite.config.js ，其中默認(rèn)配置中能夠看到，依然使用了插件來解析 Vue2 代碼的代碼，使其能夠正常運(yùn)行：

說到底，Vite 之所以能夠構(gòu)建不同框架的項(xiàng)目，就是依賴于插件機(jī)制的。除此之外，我們還可以使用插件，在開發(fā)階段或打包階段完成不同的需求。

插件的基本使用

低版本瀏覽器兼容插件

比如，Vite 構(gòu)建的項(xiàng)目，打包默認(rèn)依然使用 ES 模塊化，即便是 Vue2 開發(fā)的項(xiàng)目也是一樣，如果想讓項(xiàng)目運(yùn)行在 IE11 這樣的低版本瀏覽器中，可以按下面這樣，使用官方插件 @vitejs/plugin-legacy，打包后的結(jié)果是不需要插件功能的。因此，使用開發(fā)依賴安裝插件：

$ 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ì)于開發(fā)者如此友好又這么強(qiáng)大，而我現(xiàn)在的項(xiàng)目還在使用傳統(tǒng)的方式開發(fā)，灰常不開森，我能在傳統(tǒng)項(xiàng)目中使用 Vite 嗎?如果你剛認(rèn)識(shí) Vite，第一感覺好像不太可能，但是，當(dāng)你真正認(rèn)識(shí)了 Vite，又有什么不可能呢，其實(shí)，嗖易賊啦~~

先找一個(gè)基于 vue-cli 搭建的項(xiàng)目，然后就……

本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。