如何在index.ts中自动导出components目录下所有组件？

以下方案完全匹配你需要的import { Keyboard } from '../components'导入语法，无需修改业务代码的导入逻辑。 #

方案1：脚本自动生成index.ts（最推荐，兼容性拉满） #

这个方案是业内通用的最优解，生成的导出文件和你手动写的完全一致，天然支持TS类型推导、tree-shaking，无任何运行时副作用。
你可以写个简单的Node脚本遍历组件目录，自动生成导出语句：

1. 项目根目录新建gen-component-index.js：

const fs = require('fs')
const path = require('path')
// 有子目录需要递归匹配的话，可以安装glob包做更灵活的文件匹配
const componentsDir = path.resolve(__dirname, 'src/components')
// 排除index文件，只匹配组件文件
const componentFiles = fs.readdirSync(componentsDir).filter(file => 
  /\.(tsx|jsx)$/.test(file) && !file.startsWith('index.')
)

const exportContent = componentFiles.map(file => {
  const componentName = path.basename(file, path.extname(file))
  return `export { ${componentName} } from './${componentName}'`
}).join('\n')

fs.writeFileSync(path.join(componentsDir, 'index.ts'), exportContent)

2. 在package.json中配置执行命令，还可以挂载到dev、build命令前自动执行：

{
  "scripts": {
    "gen:component": "node ./gen-component-index.js",
    "dev": "npm run gen:component && vite", // 启动项目前自动生成导出文件
    "build": "npm run gen:component && vite build" // 打包前自动生成
  }
}

如果嫌每次新增组件都要跑命令麻烦，可以安装chokidar监听components目录的文件变化，新增/删除组件时自动触发导出文件更新。 #

方案2：构建工具动态导出（仅特殊场景使用） #

如果不想加脚本，也可以用构建工具的原生能力做运行时动态导出，但是有两个明显缺陷：不支持tree-shaking、TS类型需要额外手动声明，仅适合小型个人项目使用。

Vite环境实现 #

在src/components/index.ts中写入以下代码：

const modules = import.meta.glob('./*.tsx', { eager: true })
const components = {}

Object.entries(modules).forEach(([filePath, moduleExports]) => {
  if (filePath.includes('index.ts')) return
  const componentName = filePath.replace(/^\.\/(.*)\.tsx$/, '$1')
  components[componentName] = moduleExports[componentName] ?? moduleExports.default
})

export const { Camera, Keyboard } = components
// 也可以直接export default components，使用时改为import components from '../components' 再解构

Webpack环境实现 #

替换上面的glob逻辑为require.context即可，整体逻辑和Vite版本一致：

const req = require.context('.', false, /\.tsx$/)
const components = {}

req.keys().forEach(key => {
  if (key === './index.ts') return
  const componentName = key.replace(/^\.\/(.*)\.tsx$/, '$1')
  components[componentName] = req(key)[componentName] ?? req(key).default
})

export const { Camera, Keyboard } = components

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