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 搭建的项目，然后就……

本文转载自微信公众号「勾勾的前端世界」，可以通过以下二维码关注。转载本文请联系勾勾的前端世界公众号。

分享题目：Vite的插件机制：插件应用和基本使用
转载来于：http://www.shufengxianlan.com/qtweb/news46/16796.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联