Tất cả các index.ts được sử dụng để làm gì?

Tôi đã xem xét một vài dự án hạt giống và tất cả các thành phần dường như có một chỉ số. Xuất khẩu * từ thành phần đó. Tôi không thể tìm thấy bất cứ nơi nào nó thực sự được sử dụng cho?

Ví dụ: https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Cảm ơn

Từ mục chú giải được lưu trữ của Angular.io v2 cho Barrel^* :

Một thùng là một cách để cuộn lên xuất khẩu từ một số mô-đun thành một mô-đun tiện lợi duy nhất. Bản thân thùng là một tệp mô-đun tái xuất các lựa chọn xuất khẩu của các mô-đun khác.

Hãy tưởng tượng ba mô-đun trong một thư mục anh hùng:

// heroes/hero.component.ts
export class HeroComponent {}

// heroes/hero.model.ts
export class Hero {}

// heroes/hero.service.ts
export class HeroService {}

Không có thùng, người tiêu dùng sẽ cần ba báo cáo nhập khẩu:

import { HeroComponent } from '../heroes/hero.component.ts';
import { Hero }          from '../heroes/hero.model.ts';
import { HeroService }   from '../heroes/hero.service.ts';

Chúng ta có thể thêm một thùng vào thư mục anh hùng (được gọi là chỉ mục theo quy ước) xuất tất cả các mục này:

export * from './hero.model.ts';   // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
export { HeroComponent } from './hero.component.ts'; // re-export the named thing

Bây giờ một người tiêu dùng có thể nhập những gì nó cần từ thùng.

import { Hero, HeroService } from '../heroes'; // index is implied

Mỗi gói có phạm vi Angular đều có một thùng có tên là index.

Xem thêm NGOẠI TRỪ: Không thể giải quyết tất cả các tham số

^* LƯU Ý: Barrel đã bị xóa khỏi các phiên bản gần đây của bảng thuật ngữ Angular .

CẬP NHẬT Với các phiên bản mới nhất của Angular, tập tin thùng nên được chỉnh sửa như dưới đây,

export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';

index.tslà tương tự index.jstrong nodejs hoặc index.htmllà lưu trữ trang web.

Vì vậy, khi bạn nói import {} from 'directory_name'nó sẽ tìm kiếmindex.ts bên trong thư mục được chỉ định và nhập bất cứ thứ gì được xuất ở đó.

Ví dụ nếu bạn có calculator/index.tsnhư

export function add() {...}
export function multiply() {...}

Bạn có thể làm

import { add, multiply } from './calculator';

index.ts giúp chúng tôi giữ tất cả những thứ liên quan lại với nhau và chúng tôi không cần phải lo lắng về tên tệp nguồn.

Chúng tôi có thể nhập tất cả mọi thứ bằng cách sử dụng tên thư mục nguồn.

import { getName, getAnyThing } from './util';

Ở đây tiện dụng là tên thư mục không phải tên tệp mà có index.tsthể xuất lại cả bốn tệp.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';