如何从我的项目中删除大部分index.ts文件？

Question

我想优化我的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" 并让巴别插件将其解析为 import { Header } from "components/Header/Header". 这意味着我可以删除index.ts。

哪个Babel插件可以做到这一点？

我已经在使用 babel-plugin-module-resolver 以解决 components 文件夹中。我的问题是，我也在使用TypeScript，那么如何告诉TypeScript编译器这个模块是这样解析的呢？

请帮助我。谢谢！我正在寻找优化我的React文件夹结构的方法。

Answer 1

你应该可以让你的组件中的index.ts正常地处理这个问题。我不认为这与下列问题有任何关系 babel-plugin-module-resolver这只是index.tsjs文件的一般工作方式。https:/alligator.ioreactindex-js-public-interface。

你应该可以通过在你的组件目录下的index.ts文件中执行以下操作来获得你要找的东西。

你导入你的Header组件，然后直接导出它。

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

或者你也可以根据你的设置做一个对称的导出。

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