VITE 【vite插件开发】


前言

vite插件的本质就是一个具有一些属性和钩子函数的对象

// vite-plugin-feature

export default {
    name:"vite-plugin-feature",// 必须的,将会在 warning 和 error 中显示
    
    load(id){
    }
}

一、vite插件与rollup插件的兼容性

在开发中,Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子,与 Rollup 如出一辙。
他表示,除了vite特定的钩子外,我们开发插件时看rollup插件开发文档即可

vite插件上的钩子和rollup插件的钩子表现是一致的,所有rollup插件上会调用的钩子,vite插件都会同样的调用,功能也一样

请注意 moduleParsed 钩子在开发中是 不会 被调用的,因为 Vite 为了性能会避免完整的 AST 解析。


二、创建一个vite插件

1. 插件的执行场景和顺序

执行顺序
有时候上一个插件的输出结果会作为下一个插件的参数进行传递,我们需要明白插件额执行顺序才能更好的控制插件执行的结果

function vitePluginFeature(){
   return {
	   enforce:"pre"|"post", // 指定插件执行顺序
   }	
}

解析后的插件将按照以下顺序排列:

  • Alias:vite配置得别名处理
  • 带有 enforce: ‘pre’ 的用户插件
  • Vite 核心插件
  • 没有 enforce 值的用户插件
  • Vite 构建用的插件
  • 带有 enforce: ‘post’ 的用户插件
  • Vite 后置构建插件(最小化,manifest,报告)

执行场景
有的时候,我们需要在特定的时候才执行某些插件,比如开发阶段我们不执行代码压缩,在生产环境则需要执行。这时我们可以通过apply属性去控制

function vitePluginFeature() {
  return {
    name: 'vite-plugin-feature',
    apply: 'build' // 或 'serve',只在serve模式或build模式时调用插件,不定义则都执行
    // 更精细化的判断
    apply(config, { command }) {
  		// 非 SSR 情况下的 build
	  return command === 'build' && !config.build.ssr
	}
  }
}

2.开发习惯

一般来说都会用一个函数返回一个插件对象的形式来开发插件,以便在调用插件时能够传递参数

export default function vitePluginFeature(options){
	return {}
}

// 使用时
import vitePluginFeature from "vite-plugin-feature.js"
definedConfig({
	plugins:[vitePluginFeature({mode:"dev"})]
})

3.常用的属性

如果想看全部的属性请移步官网

{
	name:"vite-plugin-feature",// 必须的,将会在 warning 和 error 中显示
	apply:"serve"|"build", // 决定是在打包时还是开发时调用
	enforce:"pre"|"post", // 指定插件执行顺序
}

4.常用的钩子

{
	name:"vite-plugin-feature",// 必须的,将会在 warning 和 error 中显示
	
	
	// 一般在这个钩子内用来修改vite配置
	consfig(config){
		return config; // 返回的值将会作为新配置
	},

	// vite配置解析后执行,在这个钩子中可以读取配置
	configResolved(config){},
	// index.html 解析后执行
	transformIndexHtml(html,ctx){
		html.replace("txt1",'txt2'); // 可以在此处替换html文本
	},
	// 代码文件处理后执行
	transform(code){},
	
}

5.规范化路径

vite和rollup在处理路径上的标准并不一样,vite提供了normalizePath方法,使得在作为vite插件和rollup插件使用时路径能够保持一致。

import { normalizePath } from 'vite'

normalizePath('foo\\bar') // 'foo/bar'
normalizePath('foo/bar') // 'foo/bar'
### 使用 Vite 进行 Chrome 插件开发 #### 创建项目结构 为了使用 Vite 构建 Chrome 扩展程序,首先需要初始化一个新的 Vite 项目。通过命令行工具安装并设置好基本的项目框架。 ```bash npm create vite@latest my-chrome-extension --template vanilla cd my-chrome-extension npm install ``` 这会创建一个基础的 HTML/CSS/JS 结构适合用于构建扩展应用[^1]。 #### 修改 `vite.config.js` 支持 Manifest 文件 为了让 Vite 正确处理 Chrome 扩展特有的 manifest.json 文件,在项目的根目录下添加此 JSON 文件,并调整 `vite.config.js` 来支持打包过程中读取这些特定资源: ```javascript // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ build: { rollupOptions: { input: './src/main.ts', output: { entryFileNames: '[name].js', chunkFileNames: '[name].js', assetFileNames: '[name].[ext]' } }, emptyOutDir: true, } }) ``` 同时确保 `manifest.json` 中指定了正确的背景脚本和服务工作线程入口点等必要字段。 #### 加载 `.env` 变量至环境中 对于不同环境下的 API 请求路径或其他配置项,可以利用 dotenv 库来管理多个`.env.*`文件。例如,在根目录创建两个不同的环境配置文件——`.env.development` 和 `.env.production`: ```plaintext #.env.development ENV=development VITE_API_URL=http://localhost:3000/api/ ``` ```plaintext #.env.production ENV=production VITE_API_URL=https://api.example.com/prod_api/ ``` 注意这里前缀用了 `VITE_`,这是因为在 Vite 中只有带有该前缀的变量才会被注入到客户端代码里作为全局常量可用. #### 编写前端逻辑与样式 按照常规方式编写 Vue 或 React 组件以及其他静态资产。由于 Vite 对现代 JavaScript 版本有很好的支持,因此可以直接采用 ES Modules 的语法糖以及最新的 CSS 功能特性而无需额外配置转换器或预处理器。 #### 测试和调试插件 完成编码之后可以在本地启动服务器模拟真实场景测试效果;也可以直接把 dist 文件夹里的产物拖拽给浏览器加载临时版本来进行更贴近实际使用的检验过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极简风格

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值