vite 批量导入图片 - 翔子的博客

场景#

有很多城市的图片

需要在一个列表中统一渲染：

导入方案#

使用 import.meta.glob 函数从文件系统导入多个模块，然后遍历渲染。

1
const files = import.meta.globEager('./*.png')
2
const modules = []
3
Object.keys(files).forEach((path) => {
4
  const name = path.replace(/^\.\/(.*)\.png$/, '$1')
5
  const module = files[path]
6
  // @ts-ignore
7
  modules[name] = module.default
8
})
9
export default modules

渲染完成后结果如下：

1
// vite 生成的代码
2
const modules = {
3
  './a.png': () => import('./a.png'),
4
  './b.png': () => import('./b.png'),
5
  ...
6
}

最后通过对象直接匹配获取即可

新版本 vite 中 import.meta.globEager 已经被废弃，需要使用 import.meta.glob('*', { eager: true }) 来代替

https://cn.vitejs.dev

webpack 导入方案#

webpack 提供 require.context 遍历文件夹下的文件，从中获取指定文件，自动导入模块

1
const files = (require as any).context('./', false, /\.png$/); //批量读取模块文件
2
const modules = files.keys().reduce((modules, path) => {
3
  const [, name] = path.replace(/^\.\/(.*)\.png$/, '$1').split('-');
4
  const module = files(path);
5
  modules[name] = module.default;
6
  return modules;
7
}, {});
8
export default modules;