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

Posted 2023-03-07

【中文标题】导出 `index.ts` 中的所有文件

【英文标题】：Export all files in `index.ts`

【发布时间】：2021-11-25 15:13:21

【问题描述】：

希望能够直接从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 和导出对象来自动导出所有组件，或者可能是其他方式一起导出？

【问题讨论】：

不，这是不可能的。您只能从模块导入，不能从目录导入。但是您可以从路径导出所有内容。这已经在这里问过了：***.com/questions/40702842/…

我不是在要求导入目录，我是在要求“破解”以“自动”让它看起来像我可以。

不过，感谢您分享上一个问题。事实证明这是可能的。那里有人发布了解决方案。

您将不得不像现在一样重新导出对象。如果它确实变得难以维护，那么请重新考虑这是否应该都是同一个模块的一部分。维护足够小的模块应该不会那么烦人。

编写生成文件的脚本。

【参考方案1】：

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

【参考方案2】：

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

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

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

【参考方案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 Camera; 我得到Declaration or statement expected.ts(1128) 知道为什么吗？

想通了，这是因为我的 Camera.ts 是 export default class Camera ..... 所以我的 index.ts 需要是 export default as Camera from './Camera';