React如何一次性导入文件夹下所有组件？

ES 模块（React 基于此）本身不支持像 Python 那样直接从文件夹一次性导入所有组件——浏览器和 Node.js 都要求明确指定导入的文件路径，没法自动扫描文件夹内的所有文件完成导入。

目前可行的两种方案 #

1. 用 index.js 统一导出（最通用、无额外配置）

这是社区最常用的方式，虽然需要创建一个额外文件，但维护成本很低：

• 在你的组件文件夹（比如 components/）里新建 index.js（TypeScript 用 index.ts）
• 在这个文件里批量导出所有组件：

  // components/index.js
  export { default as Button } from './Button';
  export { default as Card } from './Card';
  export { default as Modal } from './Modal';
  

• 之后在其他文件里，就可以用类似批量导入的语法：

  // 导入所有组件到一个对象
  import * as Components from './components';
  // 使用组件：<Components.Button />
  
  // 或者按需解构导入
  import { Button, Card } from './components';
  

2. 借助构建工具的批量导入功能（适合不想手动维护 index.js 的场景）

如果用 Webpack（比如 Create React App 内置）、Vite 这类构建工具，可以用它们的批量扫描功能自动导入：

• Webpack 环境（Create React App）：在 components/index.js 里用 require.context：

  // components/index.js
  const requireComponent = require.context('./', false, /\.js$/);
  const Components = {};
  
  requireComponent.keys().forEach(filePath => {
    // 提取组件名称（比如从 "./Button.js" 得到 "Button"）
    const componentName = filePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    // 导入组件（兼容默认导出和命名导出）
    Components[componentName] = requireComponent(filePath).default || requireComponent(filePath);
  });
  
  export default Components;
  

  导入后用法和之前一样：

  import Components from './components';
  <Components.Button />
  

• Vite 环境：可以用 import.meta.glob：

  // components/index.js
  const modules = import.meta.glob('./[A-Z]*.js', { eager: true });
  const Components = {};
  
  for (const path in modules) {
    const componentName = path.replace(/^\.\/(.*)\.\w+$/, '$1');
    Components[componentName] = modules[path].default || modules[path];
  }
  
  export default Components;
  

需要注意：第二种方案依赖构建工具，换工具可能需要调整代码，而第一种方案是原生 ES 模块支持的，兼容性最好。

内容的提问来源于stack exchange，提问作者Michal D.