Vite5无法对store模块化后使用require.context()遍历

372 阅读1分钟
问题定位:Vite5无法使用require.context()
问题描述:在store文件夹下创建多个store,使用require.context()遍历后添加入reducers。

项目结构如下:

image.png

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.slice(
        modulePath.lastIndexOf('/') + 1,
        modulePath.lastIndexOf('.')
    )
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

require.context()在webpack中是可以用,但是vite中就报错不识别require

image.png

后来在网上查阅资料说vite中可用import.meta.glob或者import.meta.globEager替代require,尝试后均报错

image.png

再后来有大佬说是vite版本问题,vite5废弃了globEager函数,改用glob并且需要加一个参数

解决方案:使用Vite5自带的import.meta.glob即可成功获取
const modulesFiles = import.meta.glob('./modules/**/*.jsx', { eager: true })