Export all files in `index.ts`-CodePudding

Would like to be able to import any component in the components directory, directly from the components directory.

The current directory structure is:

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

And would like to be able to import as follows:

// src/screens/App.tsx

import { Keyboard } from '../components'

The first option is obviously to maintain a long list of exports in src/components/index.ts:

// src/components/index.ts

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

However, this is cumbersome to maintain. Is there a way using glob and the export object to automagically export all components, or possibly another way all together?

CodePudding user response：

In this case, you need to create an index.ts file in your components directory.

First, import all of your components in it:

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

Now, export all of them:

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

export Camera;
export Keyboard;

This can be simplified in this way:

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

Finally, use the './components' path to import the Camera and other components as well:

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

Note 1: Using this type of imports/exports will cause problems with code splitting or using Suspense/Lazy methods.

Note 2: debugging will be harder with a general index file.

CodePudding user response：

Since you are using TypeScript, why not just use the paths in TsConfig like described here?

CodePudding user response：

You could achieve that by editing your index.ts to be like this

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

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