如何从我的项目中删除大多数index.ts文件

Question

我希望优化我的反应文件夹结构。看起来是这样的：

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

index.ts只是为了允许我用import { Header} from "components/Header导入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编译器这个模块是这样解决的呢？

请帮帮我。谢谢!

Answer 1

您应该能够让您的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'