如何在JS/TS中自动导出Icon目录组件至index.tsx，无需新增导入导出？

首先明确结论：仅用ES标准的import/export和通配符*无法实现，必须借助动态导入工具特性或者自动生成脚本才能达成需求。

为什么静态import/export做不到？ #

ES模块的import是静态分析机制，不支持目录通配符（比如import * from './*/index.tsx'这种写法既不符合语法规范，也不会被任何主流构建工具识别）。你没法通过静态语法自动遍历Icon/下的所有子文件夹并导入组件，新增子组件时必须手动添加对应的import/export语句，这显然不符合你的需求。

可行的实现方案 #

1. 借助构建工具的动态导入特性

如果你的项目用Webpack构建，可以用它提供的require.contextAPI：

// app/_components/Icon/index.tsx
const iconContext = require.context('./', true, /\/index\.tsx$/);

iconContext.keys().forEach(key => {
  // 跳过当前index.tsx文件
  if (key === './index.tsx') return;
  // 提取组件名称（比如从./Check/index.tsx中取出Check）
  const componentName = key.split('/')[1];
  // 导入组件（兼容默认导出和命名导出）
  const component = iconContext(key).default || iconContext(key);
  // 动态挂载为命名导出
  module.exports[componentName] = component;
});

// TypeScript类型声明（可选，放在同目录index.d.ts）
export { default as Check } from './Check';
export { default as Close } from './Close';
// 新增组件时需要同步更新类型声明，或者用类型推断简化

如果用Vite构建，可以用它的import.meta.globAPI：

// app/_components/Icon/index.tsx
// eager: true 表示同步导入
const iconModules = import.meta.glob('./*/index.tsx', { eager: true });

const icons: Record<string, React.ComponentType> = {};
for (const path in iconModules) {
  const componentName = path.split('/')[1];
  const module = iconModules[path] as { default: React.ComponentType };
  icons[componentName] = module.default || module;
}

// 动态导出所有组件（注意：TS可能需要额外类型处理）
export const { Check, Close } = icons;

2. 用脚本自动生成静态导出语句

写一个简单的Node脚本，自动遍历Icon/下的子文件夹并生成index.tsx里的导出语句，新增组件时只需运行脚本即可：

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

const iconDir = path.resolve(__dirname, '../app/_components/Icon');
const indexFilePath = path.join(iconDir, 'index.tsx');

// 获取所有子文件夹（排除非组件目录）
const componentDirs = fs.readdirSync(iconDir, { withFileTypes: true })
  .filter(dirent => dirent.isDirectory() && !['node_modules'].includes(dirent.name))
  .map(dirent => dirent.name);

// 生成导出语句
const exportLines = componentDirs.map(name => `export { default as ${name} } from './${name}';`);
const content = exportLines.join('\n');

// 写入index.tsx
fs.writeFileSync(indexFilePath, content);

然后在package.json里添加脚本：

{
  "scripts": {
    "generate-icons": "node scripts/generate-icon-exports.js"
  }
}

每次新增组件后运行npm run generate-icons，脚本会自动更新index.tsx的导出内容，这样就能用静态的import { Check, Close } from "@/app/_components/Icon"导入，且无需手动修改导出代码。

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