Vite 的插件機制：插件應用和基本使用
Vite 的插件應用
使用插件：https://cn.vitejs.dev/guide/using-plugins.html
因為 Vite 依賴于 Rollup ，這意味著 Vite 可以利用 Rollup 插件的強大生態系統。很多功能性的支持，在 Rollup 項目中需要添加插件，而在 Vite 為了能夠提供開箱即用的體驗，已經內建支持了。在前面的功能概覽講解中，我們已經看到了，你可以具體去看：https://cn.vitejs.dev/guide/features.html
除此之外，官方也提供了一系列插件，比如 Vue 3 單文件組件的解析插件：@vitejs/plugin-vue。在初始化項目完成后，在配置文件 Vite.config.js 的默認配置中就能看到：
而如果使用 Vite 構建一個 React 項目，同樣在配置文件中，能夠看到對 React 代碼支持的插件被引入使用：
這里也額外插一句，前面說過，在構建項目時，你可以通過在命令行添加指定模板的方式，構建不同框架模板的項目。官方提供了很多模板，而社區提供了更多的模板類型。比如很多小伙伴想使用 Vite 開發 Vue2 的項目，就可以到社區模板中，找到對應的模板，社區模板列表：https://github.com/vitejs/awesome-vite#templates
我們以 vite-vue2-starter 模板為例，找到具體的模板以后，我們就可以使用degit:https://github.com/Rich-Harris/degit 之類的工具，使用社區模版來搭建項目了，具體操作如下：
- npx degit matt-auckland/vite-vue2-starter myvitevue2
項目搭建搭建成功后，我們打開配置文件 Vite.config.js ，其中默認配置中能夠看到，依然使用了插件來解析 Vue2 代碼的代碼，使其能夠正常運行：
說到底，Vite 之所以能夠構建不同框架的項目，就是依賴于插件機制的。除此之外，我們還可以使用插件，在開發階段或打包階段完成不同的需求。
插件的基本使用
低版本瀏覽器兼容插件
比如，Vite 構建的項目，打包默認依然使用 ES 模塊化，即便是 Vue2 開發的項目也是一樣，如果想讓項目運行在 IE11 這樣的低版本瀏覽器中，可以按下面這樣，使用官方插件 @vitejs/plugin-legacy，打包后的結果是不需要插件功能的。因此，使用開發依賴安裝插件：
- $ npm i @vitejs/plugin-legacy -D
安裝完成后，在配置文件 vite.config.js 中，引入并使用插件：
如果你對 Rollup 比較熟悉，你會發現，Vite 中插件的使用規則就是 Rollup 的插件使用規則。
此時，我們就可以使用 npm run build 打包項目了，使用插件打包和不使用插件打包，結果具有非常明顯的差異。
官方提供的插件并不多，插件：https://cn.vitejs.dev/plugins/，我們去社區尋找到大量且功能豐富的插件：https://github.com/vitejs/awesome-vite#plugins
MarkDown 解析插件
現在我有個需求，解析 md 文檔并展示，可以使用 vite-plugin-md
安裝插件：
- npm ivite-plugin-md -D
\vite.config.js , 引入并使用插件：
對于 Vite 的基本用法，到這里也就差不多了。那么 Vite 對于開發者如此友好又這么強大，而我現在的項目還在使用傳統的方式開發，灰常不開森，我能在傳統項目中使用 Vite 嗎?如果你剛認識 Vite，第一感覺好像不太可能，但是，當你真正認識了 Vite，又有什么不可能呢，其實，嗖易賊啦~~
先找一個基于 vue-cli 搭建的項目，然后就……
本文轉載自微信公眾號「勾勾的前端世界」，可以通過以下二維碼關注。轉載本文請聯系勾勾的前端世界公眾號。
