React.js中如何通过循环实现组件的自动批量导入？

'import' and 'export' may only appear at the top level 报错原因：标准ES6的import是静态导入语法，JS引擎会在代码执行前预解析导入逻辑，因此强制要求必须写在文件最顶层，不能出现在循环、条件判断、函数内部等非顶层位置。

以下是可实现批量导入的合法方案：

方案1：使用require.context同步批量导入（兼容Webpack、Vite2+环境） #

该方法适合需要同步拿到所有组件的场景，是最常用的批量导入方案，示例如下：

// 假设代码写在页面组件的统一入口文件 src/pages/index.js 中，用于批量导入同目录下的所有页面组件
// 参数说明：1. 导入的目标目录 2. 是否遍历子目录 3. 匹配文件的正则
const modules = require.context('./', false, /\.js$/)
const components = {}

modules.keys().forEach(filePath => {
  // 排除当前入口文件，避免循环导入
  if (filePath === './index.js') return
  // 提取文件名作为组件名，例如 ./Home.js 提取为 Home
  const componentName = filePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  // 取默认导出的组件
  components[componentName] = modules(filePath).default
})

使用时直接从components对象取值即可：const Home = components.Home

方案2：使用动态import()异步导入（原生ES模块标准支持） #

该方法是ES官方支持的动态导入语法，返回Promise，适合按需加载、路由懒加载等异步场景，示例如下：

const componentList = ['Home', 'Login', 'Dashboard']
const loadAllComponents = async () => {
  const components = {}
  for (const name of componentList) {
    const module = await import(`./${name}`)
    components[name] = module.default
  }
  return components
}

// 调用时需要异步处理
loadAllComponents().then(components => {
  // 在此处使用导入完成的组件
})

方案3：Vite专属同步批量导入 #

如果你的项目使用Vite构建，可以直接用Vite原生提供的import.meta.globEager方法实现更高效的同步批量导入：

// 批量匹配同目录下所有js文件
const rawModules = import.meta.globEager('./*.js')
const components = Object.entries(rawModules).reduce((result, [filePath, module]) => {
  if (filePath === './index.js') return result
  const componentName = filePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  result[componentName] = module.default
  return result
}, {})

注意事项 #

• 如果组件数量较少，手动写静态导入更利于代码可读性，也方便打包工具做Tree Shaking优化，避免引入冗余代码增大产物体积。
• 批量导入时注意排除当前入口文件，避免出现循环引用报错。

内容的提问来源于stack exchange，提问作者Mariusz Najwer