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

Question

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

import MyComponent from './MyComponent';

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

找不到模块“./MyComponent”`

文件夹结构：

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

MyComponent.tsx：

export default class extends Component {
  ...
}

package.json:

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

如果我将MyComponent.tsx 更改为index.tsx，它会起作用，但我认为package.json 中的main 的目的正是为了做我正在尝试的事情。谢谢！

Answer 1

main 字段仅支持解析带有 .js 扩展名的模块，types 字段（TypeScript 类似于 main）支持 .d.ts 字段。 TypeScript module resolution docs 仅描述这些扩展的用法。

这背后的原因是这些字段旨在与已发布的包一起使用。 .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';

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