Glob 导入
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块:
const modules = import.meta.glob('./src/*.js');
以上将会被转译为下面的样子:
// vite 生成的代码
const modules = {
'./src/foo.js': () => import('./src/foo.js'),
'./src/bar.js': () => import('./src/bar.js')
}
你可以遍历 modules 对象的 key 值来访问相应的模块:
Object.keys(modules).forEach(url => {
const li = document.createElement('li');
ul.appendChild(li);
const link = document.createElement('a');
li.appendChild(link);
const pathname = url.split('/').pop().split('.ts')[0];
link.href = `#${url}`
link.innerText = pathname;
link.addEventListener('click', () => location.hash = url);
})
匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。
import.meta.globEager
如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),你可以使用 import.meta.globEager 代替:
const modules = import.meta.globEager('./src/*.js')
以上会被转译为下面的样子:
// vite 生成的代码
import * as __glob__0_0 from './src/foo.js'
import * as __glob__0_1 from './src/bar.js'
const modules = {
'./src/foo.js': __glob__0_0,
'./src/bar.js': __glob__0_1
}
请注意
- 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
- 该 Glob 模式会被当成导入标识符:必须是相对路径(以
./
开头)或绝对路径(以/
开头,相对于项目根目录解析)。 - Glob 匹配是使用
fast-glob
来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。 - 你还需注意,glob 的导入不接受变量,你应直接传递字符串模式。
- glob 模式不能包含与包裹引号相同的引号字符串(其中包括
'
,"
,```),例如,如果你想实现'/Tom\'s files/**'
的效果,请使用"/Tom's files/**"
代替。
网友评论