打字稿无法解析导入中的非相对路径

Posted 2023-03-13

【中文标题】打字稿无法解析导入中的非相对路径

【英文标题】：typescript can't resolve non-relative path in import

【发布时间】：2016-08-22 09:03:06

【问题描述】：

我有这样的项目结构

|--src
     |--app.component
                    |--index.ts
     |--home.component
                    |--index.ts
|--tsconfig.json
|--webpack.config.js

我正在尝试在 app.component-index.ts 中执行以下操作

import  HomeComponent  from 'components/home.component'

Typescript 找不到这个模块并抛出

error TS2307: Cannot find module 'home.component'

Typescript 文档接下来说：

对 moduleB 的非相对导入，例如 import b from "moduleB"， 在源文件 /root/src/folder/A.ts 中，将导致尝试 以下位置用于定位“moduleB”：

/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts 

所以对于我来说，我希望它会像

/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component

提前致谢。 附言在我的 webpack.config 中，我将 root.resolve 设置为 src 并且所有捆绑包都正确。 Typescript-loader 将错误打印到终端，但所有内容都已捆绑并正常工作

【问题讨论】：

components/home.component 看起来不像是非相对导入。你告诉它获取home.component，但那是一个目录，而不是一个模块。

@Ozrix 嗯.. 但是如果我把它改成简单的 'home.component' 它对我不起作用。这很奇怪，但几天前components/home.component 工作得很好，当时src 文件夹被命名为client

你不只需要在路径前加上'./'吗？例如。从'./components/home.component'导入 HomeComponent ？

@MattSearles 这不能解决问题。如果我这样做，那么路径就会变得相对。我可以用亲戚路径做到这一点，但我想知道为什么它不起作用

【参考方案1】：

所以我可以猜测其中的“为什么”部分，但我对 TypeScript 比较陌生。不过我已经让这个工作了，所以我会尽我所能根据该解决方案进行解释。

如果满足以下条件，您基于 TypeScript 文档的期望大部分是正确的：

'components/home.component'

被视为“非相对导入”。我相当确定（基于对我有用的解决方案）TypeScript 将其视为 tsconfig.json 中“compilerOptions.baseUrl”字段的绝对路径。

对我有用的是这样设置：

  "compilerOptions": 
    "baseUrl": ".",

    // Other options
  

这本质上是告诉 TypeScript 尝试找到类似的东西

'components/home.component'

通过在与 tsconfig.json 文件相同的目录中查找名为“components”的目录，然后在其中查找名为“home.component”的文件/目录。

所以如果你的结构看起来像：

|--src
   |--app.component
       |--index.ts
   |--home.component
       |--index.ts
|--tsconfig.json
|--webpack.config.js

您将 baseUrl 设置为“。”你可能需要像这样格式化你的导入

import  HomeComponent  from 'src/home.component'

【讨论】：

感谢您。我可以使用"baseUrl": "src/" 我的