通过在vite.config.js中配置不同的插件使用
import { defineConfig } from "vite";
// 自定义插件
import myDemoPlugins from "./plugins/ViteAliases.js";
export default defineConfig({
plugins:[
myDemoPlugins()
]
});
./plugins/ViteAliases.js
// vite 插件是一个函数通常,这个函数必须返回给vite一个配置对象
module.exports = () => {
return {
// name: "vite-plugin-vue-demo",
// enforce: "pre",
config: (config, env) => {
// config: 目前的一个配置对象
// env: mode:string , command: string
console.log(config, env);
return {
resolve: {},
};
}
};
};
vite官方插件 https://vitejs.cn/vite3-cn/plugins/#official-plugins
vite社区插件 https://github.com/vitejs/awesome-vite#plugins
跟webpack的生态相比,vite确实还比不过,如果没有你想要的插件和配置,可能需要自己动手写插件。
在手写vite插件前,需要了解vite官网提供的一些vite相关的生命周期,以及这些生命周期对应的一些钩子函数。
vite 官网 插件 API https://vitejs.cn/vite3-cn/guide/api-plugin.html
export default function myPlugin() {
return {
name: 'xxxx你的插件名称'
}
}
如果你的插件只适用于特定的框架,它的名字应该遵循以下前缀格式:
vite-plugin-vue- 前缀作为 Vue 插件
vite-plugin-react- 前缀作为 React 插件
vite-plugin-svelte- 前缀作为 Svelte 插件
对于 Vite 专属的插件:
Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
在 package.json 中包含 vite-plugin 关键字。
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明(如,本插件使用了 Vite 特有的插件钩子)。
一个 Vite 插件可以额外指定一个 enforce 属性(类似于 webpack 加载器)来调整它的应用顺序。enforce 的值可以是pre 或 post。解析后的插件将按照以下顺序排列:
export default function myPlugin() {
return {
name: 'xxxx你的插件名称',
enforce: "pre"
}
}
默认情况下插件在开发(serve)和构建(build)模式中都会调用。如果插件只需要在预览或构建期间有条件地应用,请使用 apply 属性指明它们仅在 ‘build’ 或 ‘serve’ 模式时调用:
function myPlugin() {
return {
name: 'build-only',
apply: 'build' // 或 'serve'
}
}
同时,还可以使用函数来进行更精准的控制:
apply(config, { command }) {
// 非 SSR 情况下的 build
return command === 'build' && !config.build.ssr
}
通用钩子 https://vitejs.cn/vite3-cn/guide/api-plugin.html#universal-hooks
vite独有的钩子 https://vitejs.cn/vite3-cn/guide/api-plugin.html#vite-specific-hooks