uni-app HBX3.4.7 vue3 微信小程序 const modulesFiles = import.meta.globEager('./modules/*.js'); 报错问题(非bug,已解决)

发布于 1周前 作者 vueper 来自 Uni-App

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         |

4 回复

咋解决的,说说,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;
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!