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

Question

在下面的文件夹结构中，我想将我的组件导入到 App.tsx这边走:

import MyComponent from './MyComponent';

Typescript 抛出错误，尽管我的 package.json具有 main 的文件属性集:

cannot find module "./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至 index.tsx ，它有效，但我认为 main 的目的在 package.json就是做我正在尝试的事情。谢谢!

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';

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