一、vite插件

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

1、官方插件¶

• @vitejs/plugin-vue¶

  提供 Vue 3 单文件组件支持。

• @vitejs/plugin-vue-jsx¶

  提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）。

• @vitejs/plugin-vue2¶

  提供对 Vue 2.7 的单文件组件支持。

• @vitejs/plugin-vue2-jsx¶

  提供对 Vue 2.7 JSX 对支持（通过 dedicated Babel transform）。

• @vitejs/plugin-react¶

  使用 esbuild 和 Babel，使用一个微小体积的包脚注可以实现极速的 HMR，同时提升灵活性，能够使用 Babel 的转换管线。在构建时没有使用额外的 Babel 插件，只使用了 esbuild。

• @vitejs/plugin-react-swc¶

  在开发时会将 Babel 替换为 SWC。在构建时，若使用了插件则会使用 SWC+esbuild，若没有使用插件则仅会用到 esbuild。对不需要标准 React 扩展的大型项目，冷启动和模块热替换（HMR）将会有显著提升。

• @vitejs/plugin-legacy¶

  为打包后的文件提供传统浏览器兼容性支持。

2、其他好用插件[¶]

• unplugin-vue-components
• unplugin-auto-import

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import vueSetupExtend from "vite-plugin-vue-setup-extend";


export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    vueSetupExtend(),
  ],
});

二、vite插件开发

const fileRegex = /\.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null // 如果可行将提供 source map
        }
      }
    },
  }
}

在开发中，Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子，与 Rollup 如出一辙； Vite 插件也可以提供钩子来服务于特定的 Vite 目标。

欢迎关注我的前端自检清单，我和你一起成长