VITE 忽略指定路径的资源

devtools/2024/11/23 19:26:53/

前言

问题起因是因为项目需要引入服务器端的网络图片

而在编写配置时发现，Vite并不支持排除指定前缀的资源

唯一可以排外的只有 Rollup 的 external 选项可以排除外部依赖，但他只能排除外部依赖，不支持指定路径资源或指定前缀的资源，这就。。。。。

解决方法

后续通过阅读 Vite 官方配置选项发现这么一段话，官方说：可以通过插件自定义实现资源解析，于是就。。。

Vite 配置项
在这里插入图片描述

插件开发

Vite 使用 Rollup 插件编译和解析模块，所以本文也是用Rollup插件,下面是插件源代码：

/*** 忽略指定路径插件* @param options* @returns*/
const ignorePathPlugin = (options: { paths: string[] }) => {const PLUGIN_ID = "\0ignore-path",PLUGIN_NAME = "ignore-path";return {name: PLUGIN_NAME,resolveId(source: string) {if (options.paths.find((ignorePath) =>picomatch(ignorePath)(source),)) {return {id: `${PLUGIN_ID}_${source}`,meta: {url: source,},};}return null;},load(id: string): string | null {if (id.startsWith(PLUGIN_ID)) {const info = this.getModuleInfo(id);return `export default "${info.meta.url}";`;}return null;},};
};

插件使用方法如下：通过配置插件的paths属性设置需要忽略的路径，由于插件使用了picomatch依赖，所以支持正则、glob语法

export default defineConfig(({ mode }) => {return {plugins: [ignorePathPlugin({paths: ['/ignore-path/**/*'],}),],};
});

实现原理

插件通过配置Rollup插件的resolveId、load 构建钩子，忽略匹配资源

resolveId

该钩子函数，通过返回PartialResolvedId 对象或者重构后的资源导入路径，实现对模块的解析和重定义

本文通过返回PartialResolvedId 对象，实现忽略匹配资源，例如：

resolveId(source: string) {//判断导入资源路径是否是需要忽略的地址if (options.paths.find((ignorePath) =>picomatch(ignorePath)(source),)) {//重构模块的id和meta信息，对资源进行标记return {id: `${PLUGIN_ID}_${source}`,meta: {url: source,},};}//如果不是需要忽略的资源，返回null，交给其他插件处理return null;
},

具体原理可以查看官网文档和通过inspect插件

load

该钩子函数，通过传入导入资源的id，解析对应资源

本文插件在钩子函数内通过this.getModuleInfo(id)方法获取resolveld方法的返回值，然后获取meta属性中的url，实现对资源的解析，如：

load(id: string): string | null {//判断模块的id是否是插件标记的idif (id.startsWith(PLUGIN_ID)) {//通过this.getModuleInfo(id)内置函数，获取模块信息const info = this.getModuleInfo(id);//返回解析后的模块源码，rollup通过返回的源码信息，解析和转换模块return `export default "${info.meta.url}";`;}//如果不是，返回null，交给其他插件处理return null;
},