Wofür werden alle index.ts verwendet?

Antworten:

227

Aus dem archivierten Glossareintrag von Angular.io v2 für Barrel* :

Ein Barrel ist eine Möglichkeit, Exporte von mehreren Modulen in ein einziges Convenience-Modul zusammenzufassen. Das Fass selbst ist eine Moduldatei, die ausgewählte Exporte anderer Module erneut exportiert.

Stellen Sie sich drei Module in einem Heldenordner vor:

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

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

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

Ohne ein Fass würde ein Verbraucher drei Importaussagen benötigen:

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

Wir können dem Heldenordner (gemäß Konvention Index genannt) ein Fass hinzufügen, das alle diese Elemente exportiert:

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

Jetzt kann ein Verbraucher das, was er braucht, aus dem Fass importieren.

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

Die Pakete mit Angular-Gültigkeitsbereich haben jeweils einen Lauf mit dem Namen index.

Siehe auch AUSNAHME: Es können nicht alle Parameter aufgelöst werden


* HINWEIS: Barrel wurde aus neueren Versionen des Angular-Glossars entfernt .

UPDATE Mit den neuesten Versionen von Angular sollte die Barrel-Datei wie folgt bearbeitet werden:

export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';
Günter Zöchbauer
quelle
5
Wenn ich das Äquivalent zu mache export * from './hero.model.ts', erhalte ich die Meldung "'Ein Importpfad kann nicht mit einem' .ts '' enden." Also wechsle ich einfach zu export * from './hero.model'. Es lohnt sich auch, Ihren Kommentar zu Angular
The Red Pea
1
@ TheRedPea danke für den Hinweis. Ich möchte es nicht ändern, weil es ein Zitat von (einer früheren Version der) verlinkten Seite ist
Günter Zöchbauer
Wissen Sie, ob es eine Hilfsbibliothek oder einen Hilfsbefehl gibt, um index.js automatisch zu generieren?
Tom10271
1
@AlexanderAbakumov Da eine Komponente, Direktive oder Pipe zu einem und nur einem Modul gehören muss, erreichen Sie beim Importieren dieses Moduls im Wesentlichen dasselbe, wenn Sie eines der oben genannten Elemente in einem Modul deklariert haben - vorausgesetzt, Sie haben sie auch exportiert das Modul.
Risma
2
@Qwerty Ich bin mir ziemlich sicher, dass dies mit Baumschütteln funktioniert, aber die Verwendung von Fässern wurde vor langer Zeit aus den vorgeschlagenen Praktiken entfernt. Ich denke, als Module kurz vor 1.0 eingeführt wurden.
Günter Zöchbauer
29

index.tsist ähnlich index.jsin nodejs oder index.htmlist Website-Hosting.

Wenn Sie also sagen, dass import {} from 'directory_name'es index.tsim angegebenen Verzeichnis sucht und alles importiert, was dort exportiert wird.

Zum Beispiel, wenn Sie calculator/index.tsals haben

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

Du kannst tun

import { add, multiply } from './calculator';
Arun Ghosh
quelle
3
@FlowerScape Das Exportieren über den Index ist besonders nützlich, wenn Sie Bibliotheken oder Code auf Modulebene erstellen, damit Endbenutzer weniger ausführlich importiert werden. Außerdem werden unnötige / verwirrende Implementierungsdetails des importierten Codes ausgeblendet.
Quinn Turner
Refactoring. Sie können den Code ändern, z. Benennen Sie Dateien um, solange Sie die Exporte in index.ts gleich lassen.
user77115
3

index.ts Helfen Sie uns, alle verwandten Dinge zusammenzuhalten, und wir müssen uns keine Gedanken über den Namen der Quelldatei machen.

Wir können alles importieren, indem wir den Namen des Quellordners verwenden.

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

Hier ist util der Ordnername, nicht der Dateiname, der index.tsalle vier Dateien erneut exportiert.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
RAKESH HOLKAR
quelle