☰

index.ts は何の目的で使用されますか? 質問する

tag-icon • tag-icon angular
index.ts は何の目的で使用されますか? 質問する

いくつかのシード プロジェクトを調べてきましたが、すべてのコンポーネントに、そのコンポーネントから * をエクスポートする index.ts があるようです。それが実際に何に使用されているのか、どこにも見つかりません。

例えばhttps://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

ありがとう

ベストアンサー1

からAngular.io v2 のアーカイブされた用語集Barrel*のエントリ:

バレルは、複数のモジュールからのエクスポートを 1 つの便利なモジュールにまとめる方法です。バレル自体は、他のモジュールの選択されたエクスポートを再エクスポートするモジュール ファイルです。

heroes フォルダーに次の 3 つのモジュールがあるとします。

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

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

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

バレルがない場合、消費者には次の 3 つのインポート ステートメントが必要になります。

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

これらのアイテムすべてをエクスポートするバレルを、heroes フォルダー (慣例により index と呼ばれます) に追加できます。

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

今では消費者は必要なものを樽から輸入することができます。

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

Angular スコープ パッケージにはそれぞれ、index という名前のバレルがあります。

参照例外: すべてのパラメータを解決できません

* 注記： Barrel削除されましたAngular用語集の最新バージョン。

アップデート最新バージョンのAngularでは、バレルファイルは以下のように編集する必要があります。

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

おすすめ記事