typescript - 从 TypeScript 中的根路径导入模块

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"
    ]
}

score 20 · Accepted Answer

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

使用该compilerOptions.baseUrl属性，我能够进行以下导入。这让我有一个完整的根到预期的路径，这有助于我的代码维护，并且可以在任何文件中工作，独立于当前文件夹。下面的示例将我的项目的 src 文件夹作为模块根目录。

重要建议：这个 baseUrl 属性不会影响入口 webpack 文件（至少对我来说？），所以用这个例子在 src 文件夹中分离一个主文件，并从入口（即，import { Main } from './src/Main'; new Main;）运行它，只运行一次。

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

tsconfig.json示例：

{
    "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"
    ]
}

但是，它不能直接与 webpack 一起使用。同样的事情必须在 webpack 选项中完成。这就是它在 webpack 2 中的工作方式：

module.exports = {
  ...
  , resolve: {
      ...
      , modules: [ path.join(__dirname, './src') ]
    }
}

score 17 · Accepted Answer

我需要同时设置baseUrl并rootDir指向我的 src 文件夹tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": "./src",
  ...
}

然后我可以导入 .tsx 文件而不需要前缀“/”或相对路径。

例如 import BreadCrumb from 'components/BreadCrumb'

score 5 · Accepted Answer

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

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

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

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

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

score 3 · Accepted Answer

仅作记录

如果你想从你的项目中使用绝对导入，不要使用/ as 前缀，例如/src/config/cfg，只使用 assrc/config/cfg

正如https://stackoverflow.com/a/46229294/7529562指出的那样，/代表System root，

tsc会抱怨cannot find module

score -2 · Accepted Answer

您在thing.ts中的导入语句的解决方案将是

import {} './product/blah'

你的项目结构可能是

其他可能的选项和解释

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

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

如屏幕截图所示。

我将组件导入 app.module.ts 作为

./将显示当前文件夹（应用程序）
```
import { } from './'; 
```

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

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

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

typescript - 从 TypeScript 中的根路径导入模块

5 回答 5

其他可能的选项和解释

Related

Reference