导出 `index.ts` 中的所有文件

Question

希望能够直接从 components 目录导入 components 目录中的任何组件。

当前目录结构为：

src
├── components
│   ├── Camera.tsx
│   ├── Keyboard.tsx
│   └── index.ts
└── screens
    └── App.tsx

并希望能够按如下方式导入：

// src/screens/App.tsx

import { Keyboard } from '../components'

第一个选项显然是在 src/components/index.ts 中维护一长串导出：

// src/components/index.ts

export { Camera } from './Camera'
export { Keyboard } from './Keyboard'

然而，这维护起来很麻烦。有没有一种方法可以使用 glob 和导出对象来自动导出所有组件，或者可能以另一种方式一起导出？

Answer 1

既然您使用的是 TypeScript，为什么不像中描述的那样在 TsConfig 中使用 paths？

Answer 2

您可以通过将 index.ts 编辑成这样来实现

src
├── components
│   ├── Camera.tsx
│   ├── Keyboard.tsx
│   └── index.ts <=== this file
└── screens
    └── App.tsx

export * from './Camera'
export * from './Keyboard'

Answer 3

在这种情况下，您需要在 components 目录中创建一个 index.ts 文件。

首先，将所有组件导入其中：

import Camera from './Camera'
import Keyboard from './Keyboard'
// and so on for other components

现在，全部导出：

import Camera from './Camera'
import Keyboard from './Keyboard'

export Camera;
export Keyboard;

可以这样简化：

export Camera from './Camera'
export Keyboard from './Keyboard'

最后，使用“./components”路径导入 Camera 和其他组件：

import { Keyboard, Camera } from '../components'

注1：使用这种imports/exports会导致代码拆分或使用Suspense/Lazy方法出现问题

注 2： 使用通用索引文件调试会比较困难。

Export all files in `index.ts`