Vite中批量引入模块

import.meta.glob介绍

• import.meta.glob('*')默认是懒加载，通过动态导入实现，会在构建时分离成独立的chunk

• 如果想直接一次性导入所有模块，使用 import.meta.glob('*', { eager: true })

---

写法实现

在webpack中我们可以使用require.context()来批量引入

• 写法如下：

const Plugins = require.context('./plugins', true, /\.ts$/)
Plugins.keys().forEach((key) => {
  app.use(Plugins(key).default)
})

方法在vite中使用 import.meta.glob('*', { eager: true }) 来代替

• 写法如下：

const Plugins = import.meta.glob('./plugins/*.js',{eager:true})
Object.keys(Plugins).forEach(key=>{
  app.use(Plugins[key].default)
})

---

可能出现的问题

• 问题描述：TypeError: (intermediate value).globEager is not a function

• vite版本：5.0.0

• 问题原因：vite5中方法弃用，vite2好像还是可以用的

• 解决方法：使用 import.meta.glob('*', { eager: true }) 来代替

如果有不完善的部分欢迎留言讨论