vite 批量导入图片
225 字
1 分钟
vite 批量导入图片
场景
有很多城市的图片
需要在一个列表中统一渲染：
导入方案
使用 import.meta.glob 函数从文件系统导入多个模块，然后遍历渲染。
const files = import.meta.globEager('./*.png')const modules = []Object.keys(files).forEach((path) => { const name = path.replace(/^\.\/(.*)\.png$/, '$1') const module = files[path] // @ts-ignore modules[name] = module.default})export default modules渲染完成后结果如下：
// vite 生成的代码const modules = { './a.png': () => import('./a.png'), './b.png': () => import('./b.png'), ...}最后通过对象直接匹配获取即可
新版本 vite 中 import.meta.globEager 已经被废弃，需要使用 import.meta.glob('*', { eager: true }) 来代替
webpack 导入方案
webpack 提供 require.context 遍历文件夹下的文件，从中获取指定文件，自动导入模块
const files = (require as any).context('./', false, /\.png$/); //批量读取模块文件const modules = files.keys().reduce((modules, path) => { const [, name] = path.replace(/^\.\/(.*)\.png$/, '$1').split('-'); const module = files(path); modules[name] = module.default; return modules;}, {});export default modules; 相关文章 智能推荐
1
vite学习记录
前端工程 vite基本概念及常用配置
2
vite创建项目找不到svg标签问题
前端工程 2022-09-21
3
基于 Vite 的组件库工程化实战
前端工程 跟着然叔一起学习组件库的搭建
4
站在巨人的肩膀上：你还不懂create-vite原理吗？来一起康康。
前端工程 2023-03-24
5
「记录篇」我是如何一步步为公司搭建react项目脚手架的
前端工程 集成React-Router、Antd、Redux-Toolkit和React-Query，并封装ESLint+Prettier+Husky的React项目脚手架，快来试试吧！
随机文章 随机推荐