uni-app HBX3.4.7 vue3 微信小程序 const modulesFiles = import.meta.globEager('./modules/*.js'); 报错问题(非bug,已解决)
uni-app HBX3.4.7 vue3 微信小程序 const modulesFiles = import.meta.globEager(’./modules/*.js’); 报错问题(非bug,已解决)
示例代码:
const modulesFiles = import.meta.globEager('./modules/*.js');
(非bug,已解决)
操作步骤:
写上下方代码后,vue3下,无法成功编译微信小程序
const modulesFiles = import.meta.globEager('./modules/*.js');
(非bug,已解决)
预期结果:
能正常编译,import.meta.globEager
的功能是 https://blog.csdn.net/weixin_38881784/article/details/122453952
实际结果:
(非bug,已解决)
bug描述:
写上下方代码后,vue3下,无法成功编译微信小程序
const modulesFiles = import.meta.globEager('./modules/*.js');
(非bug,已解决)
| 项目信息 | 详细信息 |
|------------------|-------------------|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境 | Windows |
| PC开发环境版本 | win10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.4.7 |
| 第三方开发者工具 | 1.05.2204180 |
| 基础库版本 | 2.19.3 |
| 项目创建方式 | HBuilderX |
咋解决的,说说,MAC 4.15的报错
怎么解决的
现在vite更新了,变成语句 import.meta.glob(’./*.js’, { eager: true })
在 uni-app
中使用 import.meta.globEager
时,可能会遇到一些问题,尤其是在微信小程序环境下。import.meta.globEager
是 Vite 提供的一个功能,用于在构建时静态导入模块。然而,微信小程序的环境可能与 Vite 的某些特性不兼容,导致报错。
问题描述
在 uni-app
项目中,使用 import.meta.globEager('./modules/*.js')
时,可能会遇到以下错误:
TypeError: Cannot read property 'globEager' of undefined
或者类似的错误提示。
原因分析
import.meta.globEager
是 Vite 提供的功能,而 uni-app
在构建微信小程序时,可能使用的是其他构建工具(如 Webpack),这些工具可能不支持 import.meta.globEager
。
解决方案
由于 import.meta.globEager
在微信小程序环境下不可用,我们可以使用其他方式来实现模块的批量导入。
解决方案 1:使用 require.context
(适用于 Webpack 环境)
如果你使用的是 Webpack 作为构建工具,可以使用 require.context
来实现类似的功能。
const modulesFiles = require.context('./modules', false, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});
解决方案 2:手动导入模块
如果模块数量不多,也可以手动导入各个模块。
import moduleA from './modules/moduleA.js';
import moduleB from './modules/moduleB.js';
import moduleC from './modules/moduleC.js';
const modules = {
moduleA,
moduleB,
moduleC,
};
解决方案 3:使用 uni-app
提供的 require
方法
uni-app
也提供了 require
方法,可以动态加载模块。
const modules = {};
const moduleFiles = require.context('./modules', false, /\.js$/);
moduleFiles.keys().forEach((key) => {
const moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
modules[moduleName] = moduleFiles(key).default;
});