导出' 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

你可以这样编辑你的index.ts

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

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

Answer 2

既然你正在使用TypeScript，为什么不像这里描述的那样在TsConfig中使用paths呢?

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:使用一般索引文件调试会比较困难。