关于tsx文件的命名：Header.class.tsx vs HeaderClass.tsx

Question

在components/header目录中，使用Header.class.tsx的时候，在index.ts文件中

export * from './Header.class'

出现编译错误：

Compiled with problems:
ERROR in ./src/pages/home/HomePage.tsx 16:38-44
export 'Header' (imported as 'Header') was not found in '../../components' (possible exports: BusinessPartners, Carousel, Footer, ProductCollection, SideMenu)Compiled with problems:
ERROR in ./src/pages/home/HomePage.tsx 16:38-44
export 'Header' (imported as 'Header') was not found in '../../components' (possible exports: BusinessPartners, Carousel, Footer, ProductCollection, SideMenu)

把文件名改为HeaderClass.tsx后，在index.ts文件中

export * from './HeaderClass'

就正常了。

不知这里关于命名是否有什么要求或规则？

Answer 1

阿莱克斯刘 2024-09-27 15:28:51

这个问题与文件名中的点号 (.) 有关。在某些情况下，文件名中的点号可能会导致编译器或模块解析器误解文件类型或路径，从而引发编译错误。

可能的原因:
1. 模块解析问题： 文件名中的点号可能会被解析器误认为是文件扩展名的一部分，从而导致路径解析错误。例如，Header.class.tsx 可能被误解为 Header 文件夹中的 class.tsx 文件。
2. 工具链限制： 某些构建工具或编译器（如 TypeScript 编译器、Webpack 等）可能对文件名中的点号处理不当，导致无法正确解析文件路径。
3. 自动导入问题： 在某些编辑器（如 VS Code）中，自动导入功能可能无法正确处理包含点号的文件名，从而导致导入路径错误

解决方法
将文件名改为不包含点号的形式（如 HeaderClass.tsx）可以避免这些解析问题，从而使编译正常进行。