1. webpack(require.context)
const systemUrls = ref<{ url: string; name: string }[]>([]);
// 获取该目录下的所有svg文件
const files = require.context('public/icon', false, /\.svg$/);
systemUrls.value = files.keys().map((key) => {
const fileName = key.split('/').pop(); // 提取文件名部分
return {
url: files(key), // base64编码的url
name: fileName, // 文件名(带后缀)
};
});
require.context(directory, useSubdirectories, regExp)
directory
:要搜索的目录
useSubdirectories
:是否还搜索其子目录
regExp
:匹配文件的正则表达式。
注意:传递给 require.context
的参数必须是字面量!
webpack官方文档 (require.context 介绍)
2. vite(import.meta.glob)
const files = import.meta.glob('/public/topology/*.svg', { eager: true });
systemUrls.value = Object.keys(files).map((path: any) => {
const module = files[path] as any;
const fileName = path?.split('/')?.pop(); // 提取文件名部分
return {
url: module.default, // 图片相对路径(/public/icon/DNS服务.svg)
name: fileName, // 文件名(带后缀)
};
});
};
注意:vite 中不支持require
Vite 支持使用特殊的 import.meta.glob
函数从文件系统导入多个模块,匹配到的文件默认是懒加载。
const modules = import.meta.glob('./dir/*.js')
以上将会被转译为下面的样子:
// vite 生成的代码
const modules = {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
}
同步加载:传入 { eager: true } 作为第二个参数
const modules = import.meta.glob('./dir/*.js', { eager: true })
// vite 转译生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
'./dir/foo.js': __glob__0_0,
'./dir/bar.js': __glob__0_1,
}
多个匹配模式:第一个参数为数组
const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
反面匹配模式:使用 !
排除查找目录中的某些文件
const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])
import.meta.glob
是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
第一个文件路径:必须是相对路径(以./
开头)或绝对路径(以 /
开头,相对于项目根目录解析)或一个别名路径 (resolve.alias)