尽管在 package.json 中设置了“main”属性，Typescript 模块解析仍失败

Question

在下面的文件夹结构中，我想以App.tsx这种方式导入我的组件：

import MyComponent from './MyComponent';

package.json尽管我的文件设置了属性，但 Typescript 仍会抛出错误main：

找不到模块“./MyComponent”`

文件夹结构：

src/
|- App.tsx
|- MyComponent/
|    |- MyComponent.tsx
|    |- package.json
|    |- ...

我的组件.tsx：

export default class extends Component {
  ...
}

包.json：

{
  "name": "my-component",
  "version": "0.0.0",  
  "main": "MyComponent.tsx"
}

如果我更改MyComponent.tsx为，它会起作用，但我认为inindex.tsx的目的是完全做我正在尝试的事情。谢谢！mainpackage.json

Answer 1

该main字段仅支持解析具有.js扩展名的模块，并且该types字段（TypeScript 类似于main）支持.d.ts字段。TypeScript模块解析文档仅描述这些扩展的用法。

其背后的原因是这些字段旨在与已发布的包一起使用。.ts（或者.tsx在您的情况下）文件是旨在转换为生产就绪的 JavaScript（和帮助器元数据文件）的开发文件。如果已发布的包甚至包含.ts文件（而不是它们生成的.d.ts、.js和.js.map输出），则尝试要求这些文件将是非常不可取的。

你的 TypeScript 在执行之前总是会被转换为 JS。编译器对 TypeScript 文件的简化包含的支持假设这些包含也在运行时之前进行了转译。

只要您tsconfig.json配置为输出声明（和源映射）文件：

"compilerOptions": {
    "declaration": true,
    "sourceMap": true,
    ...

您可以将main和types字段指向输出文件：

"main": "myComponent.js",
"types: "myComponent.d.ts",

一旦创建了这些文件，它们就会正确解析。请注意，这意味着如果您正在使用任何编码辅助，通常意味着您必须重新编译才能获得更新的提示。

如果您想要自动代码帮助，这index.tsx可能是更好的路线。如果您确实想避免连续编辑多个index.tsx文件，您可以让它们重新导出模块：

export * from '/MyComponent';

编辑：包括实际的解决方案...