Question

假设我有一个项目，其主要源目录是：

C:\product\src

根据此目录，每个导入路径都与它相关。即，假设：

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '/com/name/product/thing';

同样如下：

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '../../../com/name/product/thing';

我的条目编译文件位于：

C:\product\src

例如

。那么，有没有办法在编译器选项中指定这样的输入路径（例如C:\product\src）？我需要在tsconfig.json文件中指定它，因为我将使用webpack。

我已尝试过上面的示例，但TypeScript表示无法找到所请求的模块：

// Current script: A.ts

import { B } from '/com/B';


// Current script: B.ts

export const B = 0;

我的tsconfig.json文件（在另一个项目中，但两者都相似）：

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

Answer 1

（重新发布我的答案以避免小狗插座。）

使用compilerOptions.baseUrl属性我可以进行以下导入。这使我有了一个完整的root-to-expected-path，这有助于我的代码维护，并且可以在任何文件中工作，独立于当前文件夹。以下示例将我的项目的src文件夹作为模块根目录。

重要建议：这个baseUrl属性不会影响条目webpack文件（至少对我来说？），所以用这个例子将src文件夹中的主文件分开，并从条目中运行它（即{ {1}}），只有一次。

import { Main } from './src/Main'; new Main;

tsconfig.json 示例：

// browser: directory inside src;
//   * net: A TS file.
import { URLRequest } from 'browser/net';

然而，它不会直接使用webpack。必须在webpack选项中完成同样的事情。这是它在webpack 2中的工作方式：

{
    "compilerOptions": {
        "baseUrl": "./src",
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

Answer 2

TypeScript导入在路径的开头使用/来表示根目录。要导入相对于当前文件的文件，请先删除初始斜杠或使用./。

// Current script: C:\product\src\com\name\product\blah.ts
import { thing } from './com/name/product/thing';

默认情况下，TypeScript编译器假定项目的根与tsconfig.json的位置相同。

您可以通过在tsconfig中指定rootDir属性的compilerOptions属性来指定新的根。

有关所有可用属性设置的列表，请参阅找到的here的tsconfig定义。

Answer 3

thing.ts 中的import语句解决方案

import {} './product/blah'

，您的项目结构可能是

其他可能的解释选项

我有以下应用程序结构，并将其放在

中

C:\\Users\\(username)\\Documents\firstAngular2App

如截图所示。

我将组件导入app.module.ts

./ 会显示当前文件夹（app）
```
import { } from './'; 
```

../ 将引用根文件夹（firstAngular2App-master）
```
import { } from '../'; 
```

../../ 将引用根文件夹（Documents文件夹）
```
import { } from '../../'; 
```

../ app / 指的是app文件夹，但它是从根引用的（firstAngular2App）
```
import {} from '../app/';
```

Answer 4

仅供记录

如果要从项目中使用绝对导入，请不要使用/作为前缀，例如/src/config/cfg，而应将其用作src/config/cfg

正如https://stackoverflow.com/a/46229294/7529562所指出的，/代表系统根目录，

tsc将抱怨cannot find module

Answer 5

我需要将baseUrl和rootDir设置为指向tsconfig.json中的src文件夹 { "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... } 然后我可以导入.tsx文件，而不需要带前缀的'/'或相对路径。

e.g。 import BreadCrumb from 'components/BreadCrumb'

从TypeScript中的根路径导入模块

5 个答案:

其他可能的解释选项