對於 Angular來說，模組(module)是一個容器/包(container/package)，用來存放各種元件、引用其他模組、提供依賴注入等。

index.ts (Barrel file)是一種將多個模組的匯出彙總到單個方便模組的方法。index.ts 本身是一個模組檔案，它重新匯出其他模組的選定匯出。

一個例子如下：

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

index.ts 是一種將多個模組的匯出彙總到單個方便模組的方法，它本身是一個模組檔案，重新匯出其他模組的選定匯出。

假設 library 實現者定義瞭如下的 class：

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

如果沒有 barrel file，消費者需要書寫三次 import 語句：

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

使用 barrel file 之後，重新從 demo 資料夾下匯出工具庫的實現：

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

這樣消費者只需要用一行語句，直接匯入 index.ts 即可：

```typescript
import { Foo, Bar, Baz } from '../demo'; // demo/index.ts is implied
```
這裡甚至不需要寫成 `../demo/index.ts`.

`*.d.ts` 檔案用於提供JavaScript編寫的模組的typescript型別資訊，例如 underscore / lodash / aws-sdk等工具庫。這將允許開發人員在 TypeScript 專案中使用 javascript模組，而不需要將它們轉換為ts，而不會在程式碼上得到任何型別錯誤。

例子如下：

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

import 是開發人員放在 `@NgModule` 裝飾器 imports 屬性中的東西。它使Angular模組能夠使用在另一個Angular模組中定義的功能。它允許Angular模組嚮應用程式中的其他模組公開它的一些元件/指令/管道。

例子如下：

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

按照慣例，barrel file 被命名為 `index`，因為大多數模組載入器在解析`絕對路徑`時都會`預設查詢該檔案`，這將允許我們從路徑中省略檔名，而只指向一個資料夾，這算是一個命名規範。

當我們需要在應用工程裡匯入自己實現的 library 時，由於資料夾的層次結構過深，很容易出現下列這種多重的相對路徑的情況，導致可讀性很差。

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

在 TypeScript 2.0 裡，我們有了所謂的 `baseUrl` 的編譯器設定，只需要在 `tsconfig.json` 裡做出如下配置：

```json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}
```

之後，我們使用 import 語句，就可以從 baseUrl 指定的 path 開始匯入了：

```typescript
import { foo } from 'app/bar'
```
![](https://img-blog.csdnimg.cn/img_convert/809c164aa3adf5bf4f70283227234d52.png)

關於 index.ts 在大型 Angular 專案中的應用

相關文章