有没有更高效的组件库import/export批量导入导出方案？

方案1：无额外依赖的轻量优化（推荐优先使用） #

你可以直接用ES模块的原生重导出语法，把原来的「先导入再导出」两步合并为一步，工作量直接减半，完全兼容命名导入的使用方式，没有任何适配成本：

// index.ts
export { default as ComponentOne } from '../src/components/ComponentOne';
export { default as ComponentTwo } from '../src/components/ComponentTwo';
export { default as ComponentThree } from '../src/components/ComponentThree';
export { default as ComponentFour } from '../src/components/ComponentFour';

这种写法和你原来的运行效果完全一致，TS类型可以正常识别，用户仍然可以用import { ComponentOne, ComponentTwo } from '@library'的方式导入。

方案2：全自动批量导出（适合组件数量多、迭代频繁的场景） #

如果要完全省去手动维护导出列表的工作，可以通过脚本自动生成index.ts内容，步骤如下：

1. 在项目根目录新建导出脚本generate-component-index.js：

const fs = require('fs')
const path = require('path')

// 配置你的组件目录和index.ts输出路径
const COMPONENT_DIR = path.resolve(__dirname, './src/components')
const OUTPUT_PATH = path.resolve(__dirname, './index.ts')

// 读取所有符合命名规范的组件文件（这里默认组件都是大写开头的tsx/jsx文件，可自行调整规则）
const componentFiles = fs.readdirSync(COMPONENT_DIR).filter(file => {
  return /^[A-Z][a-zA-Z0-9]*\.(tsx|jsx)$/.test(file)
})

// 生成重导出代码
const exportStatements = componentFiles.map(file => {
  const componentName = file.replace(/\.(tsx|jsx)$/, '')
  return `export { default as ${componentName} } from './src/components/${componentName}';`
})

// 写入index.ts
fs.writeFileSync(OUTPUT_PATH, exportStatements.join('\n'), 'utf-8')
console.log('组件导出列表已自动更新')

2. 在package.json的scripts中添加执行命令：

{
  "scripts": {
    "gen:index": "node generate-component-index.js"
  }
}

每次新增/删除组件后，执行npm run gen:index即可自动更新index.ts。你也可以搭配文件监听工具或者git钩子，实现组件文件变动时自动更新，完全无需手动干预。

注意事项 #

不推荐使用import.meta.glob这类运行时动态导入的方式做批量导出：这类方式虽然可以实现自动导出，但TS无法自动识别导出的组件类型，需要额外写类型声明适配，反而会增加维护成本。

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