Как удалить большинство файлов index.ts из моего проекта - PullRequest
1 голос
/ 30 апреля 2020

Я хочу оптимизировать структуру папок React. Выглядит это так:

- components
  - Header
    - Header.tsx
    - Header.styles.ts
    - index.ts

index.ts как раз позволяет мне импортировать компонент Header с import { Header} from "components/Header. Это работает, потому что я использую babel-plugin-module-resolver. Теперь, поскольку имя моей папки всегда совпадает с именем основного файла в моей папке components, я хотел бы иметь возможность импортировать заголовок с помощью import { Header } from "components", и плагин Babel разрешает это значение до import { Header } from "components/Header/Header". Это означало бы, что я мог бы удалить index.ts

Какой плагин Babel может сделать это?

Я уже используется babel-plugin-module-resolver для разрешения папки components. Моя проблема в том, что я также использую TypeScript, так как мне сказать компилятору TypeScript, что этот модуль разрешается следующим образом?

Пожалуйста, помогите мне. Спасибо!

1 Ответ

1 голос
/ 30 апреля 2020

Вы должны быть в состоянии, чтобы ваши index.ts в ваших компонентах позаботились об этом как обычно. Я не думаю, что это имеет какое-либо отношение к babel-plugin-module-resolver, просто как работают файлы index.ts / js в целом. https://alligator.io/react/index-js-public-interfaces/

Вы сможете получить то, что ищете, выполнив в файле index.ts в каталоге компонентов следующее:

Вы импортируете Компонент заголовка, а затем напрямую экспортируйте его.

import {Header} from './Header/Header'
export Header

Или вы можете выполнить симметричный экспорт в зависимости от настроек:

export {Header} from './Header/Header'
...