对于webpack来说,可以使用require.context
方法来实现文件的批量导出,但是vite
搭建vue3
项目时,不支持require
,对于这种情况可以使用import.meta.glob
或者import.meta.globEager
来实现
二者使用方法相似,只是引入时机不同,globEager
时立即引入,glob
是异步引入
globEager
const directives = import.meta.globEager('./*/index.js')
for (let com in directives) {
const comKey = com.match(/\.\/(.*?)\/index\.js/)[1]
const comValue = directives[com].default
app.directive(comKey, comValue)
}
glob
const directives = import.meta.glob('./*/index.js')
for (let dire in directives) {
const direKey = dire.match(/\.\/(.*?)\/index\.js/)[1]
directives[dire]().then((res) => {
const direValue = res.default
app.directive(direKey, direValue)
})
}