React中导入util目录失败及批量导入导出组件方法咨询

一、为什么最初会出现“模块未找到”错误？ #

当你用import * as All from './util'时，JS打包工具或运行时会默认查找util目录下的入口文件（通常是index.js/index.mjs）作为整个目录的导出入口。如果你的util目录之前没有这个文件，自然会触发模块未找到的错误。你后来手动添加index.js并手动导出的方式是正确的，但面对大量文件确实效率很低，下面给你几种批量处理的实用方案。

二、批量导入导出的高效方案 #

1. 利用打包工具的批量导入API（前端项目推荐） #

如果你的项目用了Webpack、Vite这类主流打包工具，可以直接用它们提供的批量导入能力：

方案A：Webpack/Vue CLI 用 require.context

在util/index.js里写入以下代码：

// 批量导入当前目录下所有以PageScreen开头的.js文件
const modules = require.context('./', false, /PageScreen\d+\.js$/);

// 整理并批量导出
const exportObj = {};
modules.keys().forEach(filePath => {
  // 提取文件名作为导出的key（比如./PageScreen1.js → PageScreen1）
  const moduleName = filePath.replace(/^\.\/(.*)\.js$/, '$1');
  exportObj[moduleName] = modules(filePath).default;
});

// 支持两种导出方式，选一种即可
export default exportObj;
// 或者命名导出：export { ...exportObj };

之后你在PageScreen.js里依旧用import * as All from './util'，就能一次性拿到所有PageScreen组件了。

方案B：Vite 用 import.meta.glob

Vite提供了更贴合ES模块的批量导入方式，在util/index.js里写：

// 批量导入当前目录下所有PageScreen开头的.js文件，eager: true表示立即导入
const modules = import.meta.glob('./PageScreen*.js', { eager: true });

// 整理导出对象
const exportObj = {};
for (const filePath in modules) {
  const moduleName = filePath.replace(/^\.\/(.*)\.js$/, '$1');
  exportObj[moduleName] = modules[filePath].default;
}

export { ...exportObj };

2. 纯Node.js环境下的批量导入（后端项目适用） #

如果是Node.js后端项目，可借助fs模块读取目录后动态导入：

// util/index.js
import fs from 'fs/promises';
import path from 'path';

const exportObj = {};

// 读取当前目录下的所有文件
const files = await fs.readdir(new URL('.', import.meta.url));

for (const file of files) {
  // 筛选目标文件，排除index.js本身
  if (file.startsWith('PageScreen') && file.endsWith('.js') && file !== 'index.js') {
    const module = await import(`./${file}`);
    const moduleName = file.replace('.js', '');
    exportObj[moduleName] = module.default;
  }
}

export { ...exportObj };

注意：需要在package.json里设置"type": "module"开启ES模块支持，且因为是异步导入，你在导入util时可能需要用await import('./util')。

3. 脚本自动生成导出代码（一次性操作） #

如果不想用动态导入，也可以写个简单的Node脚本，一次性生成index.js的导入导出语句：

// generate-exports.js
const fs = require('fs');
const path = require('path');

const dirPath = './src/util';
const files = fs.readdirSync(dirPath);

// 筛选出所有PageScreen开头的js文件
const targetFiles = files.filter(file => file.startsWith('PageScreen') && file.endsWith('.js'));

// 生成导入和导出代码
const importLines = targetFiles.map(file => `import ${file.replace('.js', '')} from './${file}';`).join('\n');
const exportLine = `export { ${targetFiles.map(file => file.replace('.js', '')).join(', ')} };`;

const content = `${importLines}\n\n${exportLine}`;

// 写入util/index.js
fs.writeFileSync(path.join(dirPath, 'index.js'), content);

运行这个脚本后，util/index.js就会自动生成所有需要的导入导出语句，之后新增文件时再跑一遍脚本就行。

内容的提问来源于stack exchange，提问作者Justin Hu