vite-file-import-transform

Vite-file-import-transform

项目打包替换为vite时，需要引入依赖代码转es module的库，但这类库通常不会替换项目中const img = require("@/assets/xxxx.jpg")的写法。

vite官方推荐将其替换为new URL('@/assets/xxxx.jpg', import.meta.url).href的写法，参考地址

本插件即是自动将require的写法替换成new URL的写法

配置和用法

配置如下：

import * as t from "@babel/types";

interface viteFileImportTransformParams {
  include?: RegExp|RegExp[];
  exclude?: RegExp|RegExp[];
  // 假设require('./xxx.jpg'), filePath即是'./xxx.jpg'对应的ast树节点，若函数返回null，则不转换
  // 该函数用于细化控制转换内容
  importPathHandler?: (filePath: t.StringLiteral|t.TemplateLiteral) => t.StringLiteral|t.TemplateLiteral|null;
}

用法：

import { defineConfig } from "vite";
import viteFileImportTransform from "vite-file-import-transform";

const config = defineConfig({
  plugins: [
    viteFileImportTransform({
      // 假设只针对node_modules下的xxx库
      // include、exclude传入格式为: RegExp[]
      include: [/\.tsx?$/], // include不穿的话默认是匹配.ts和.tsx
      exclude: [],
      importPathHandler: ()=>{}
    })
  ]
})

export default config;