Angular 專案目錄中的 TSConfig 檔案表明該目錄是 TypeScript 或 JavaScript 專案的根目錄。 TSConfig 檔案可以是 tsconfig.json 或 jsconfig.json，兩者都有相同的配置變數集。

我們直接來到 paths 欄位：

![](https://img-blog.csdnimg.cn/img_convert/06b5ad622643a198378d3e1e8d3d777b.png)

這是一個物件，定義了一系列將匯入(import)重新對映到相對於 baseUrl 的查詢位置的條目。

所謂 baseUrl，允許開發人員設定基本目錄以解析非絕對模組名稱。

我們可以定義一個根資料夾，然後可以在其中進行絕對檔案解析。

考慮下面的例子：
![](https://img-blog.csdnimg.cn/img_convert/848cd677e257349cb25175473d0c0830.png)

在此專案中使用 "baseUrl": "./"，TypeScript 將查詢從與 tsconfig.json 相同的資料夾開始的檔案。

例如下面的用法：

```typescript
import { helloWorld } from "hello/world";
console.log(helloWorld);
```

Spartacus 專案的 baseUrl 用法：
![](https://img-blog.csdnimg.cn/img_convert/e0f6aea51c462641210f32ccccd4115d.png)

paths 內的值，允許開發人員宣告 TypeScript 應該如何解析應用程式的 require/imports 中的匯入。

```typescript
{
  "compilerOptions": {
    "baseUrl": ".", // this must be specified if "paths" is specified.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // this mapping is relative to "baseUrl"
    }
  }
}
```

上面程式碼的作用：

這將使開發人員能夠編寫 import "jquery"，並在本地獲得所有正確的輸入。

paths 欄位支援 `*` 萬用字元：

```json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
        "app/*": ["app/*"],
        "config/*": ["app/_config/*"],
        "environment/*": ["environments/*"],
        "shared/*": ["app/_shared/*"],
        "helpers/*": ["helpers/*"],
        "tests/*": ["tests/*"]
    },
}
```

在這種情況下，開發人員可以告訴 TypeScript 檔案解析器支援許多自定義字首來查詢程式碼。 此模式可用於避免程式碼庫中較長的相對路徑。

# rootDir

所有非宣告輸入檔案的最長公共路徑。 如果設定了複合，則預設為包含 tsconfig.json 檔案的目錄。

Spartacus rootDir 的值：`.`

![](https://img-blog.csdnimg.cn/img_convert/daaefb417c814de40ead39b8876d4f5f.png)

當 TypeScript 編譯檔案時，它在輸出目錄中保持與輸入目錄中相同的目錄結構。

例如，假設有下面這些輸入檔案：

![](https://img-blog.csdnimg.cn/img_convert/94aaa9da06380044ae65a1e85285d39e.png)

rootDir 的推斷值是所有非宣告輸入檔案的最長公共路徑，在本例中為 core/。

Angular tsconfig.json 檔案裡的 paths 用途

相關文章