Vite插件

Vite中使用插件

安装插件
在配置文件中引入插件
在 plugins 数组中配置插件

// vite.config.js
import { defineConfig } from 'vite';
// 引入插件
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  // 引入的插件一般是一个方法
  // 因为在使用插件的时候，需要调用一下
  // 调用后一般会返回一个对象
  plugins: [vue(), eslintPlugin()]
})

相关细节

1. 传入配置选项

有些插件在使用的时候支持传递配置选项。

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // 在使用插件的时候，向插件方法传入一个配置对象
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

2. 执行顺序

如果配置了多个插件，那么这些插件的执行是有先后顺序的，会按照数组从前到后的顺序执行。

import { defineConfig } from 'vite';
import pluginA from './pluginA';
import pluginB from './pluginB';
import pluginC from './pluginC';

export default defineConfig({
  plugins: [
    pluginA(), // 先执行 pluginA
    pluginB(), // 然后执行 pluginB
    pluginC()  // 最后执行 pluginC
  ]
});

3. 按需引用

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。

如果插件在服务或构建期间按需使用，可以使用 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用。

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // 这里其实核心就是为返回的对象增加一个属性
    {...typescript2(), apply: 'build'}
  ],
})

常用Vite插件

Vite插件分为这么几类：

官方插件：就是由 Vite 官方团队开发和维护的，一般这些插件提供一些核心功能支持。
- @vitejs/plugin-vue: 提供对 Vue 3 的支持，处理单文件组件（.vue 文件）
- @vitejs/plugin-react: 提供对 React 的支持，包括快速的热模块替换（HMR）
- @vitejs/plugin-legacy: 提供对旧浏览器的支持，通过为现代语法和特性提供传统浏览器兼容性脚本
社区插件：由社区提供的插件，社区插件通常提供更多的和业务功能以及实用工具相关的支持。
- vite-plugin-svelte: 用于在 Vite 项目中集成 Svelte。
- vite-plugin-windicss: 集成 Windi CSS，类似于 Tailwind CSS，为 Vite 项目提供实用的样式工具。
- vite-plugin-compression：这个插件用于在构建过程中自动压缩资源文件，支持 gzip 或者 brotli 压缩，有助于减小最终部署的文件大小。
- vite-plugin-pwa: 用于将你的 Vite 项目转换成渐进式网络应用（PWA），包括自动管理 service worker 和 manifest 文件。
- vite-plugin-svg-icons：用于将 SVG 文件导入并自动转换为 SVG symbol，方便在项目中作为图标使用。
rollup插件：因为 Vite 在生产阶段采用的是 rollup，因此 rollup 插件也可以在 Vite 中使用
- @rollup/plugin-image: 允许导入 JPG, PNG, GIF, SVG, 和 WebP 文件。
- @rollup/plugin-commonjs: 将 CommonJS 模块转换为 ES6，便于在 Vite 项目中使用更多的 npm 包。
- rollup-plugin-dsv: 加载并解析 .csv 和 .tsv 文件。

如何自定义 Vite 插件呢？

Vite 插件扩展了 rollup 接口，然后带有一些 Vite 独有的配置项。所以想要自定义 Vite 插件，建议先了解 rollup插件开发
还需要了解一些生命周期钩子方法，不同的钩子在不同的时间点被调用，这为插件开发者提供了接入 Vite 内部机制的接口，允许在 Vite 的开发服务器和构建流程中实现更复杂和定制化的功能。

-EOF-

Vite插件 ​

Vite插件