À quoi servent tous les index.ts?


132

J'ai examiné quelques projets d'amorçage et tous les composants semblent avoir un index.ts qui exporte * à partir de ce composant. Je ne trouve nulle part à quoi il sert réellement?

Par exemple, https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Merci


1
Ce problème sur github est pertinent pour cette discussion . Vous voudrez peut-être le lire avant d'utiliser des fichiers barrel avec votre projet Angular
BeetleJuice

Réponses:


228

À partir de l' entrée de glossaire archivée d'Angular.io v2 pour Barrel* :

Un baril est un moyen de regrouper les exportations de plusieurs modules en un seul module pratique. Le canon lui-même est un fichier de module qui réexporte des exportations sélectionnées d'autres modules.

Imaginez trois modules dans un dossier heroes:

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

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

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

Sans baril, un consommateur aurait besoin de trois déclarations d'importation:

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

Nous pouvons ajouter un baril au dossier heroes (appelé index par convention) qui exporte tous ces éléments:

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

Désormais, un consommateur peut importer ce dont il a besoin du baril.

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

Les packages à portée angulaire ont chacun un baril nommé index.

Voir aussi EXCEPTION: impossible de résoudre tous les paramètres


* REMARQUE: Barrel a été supprimé des versions plus récentes du glossaire angulaire .

MISE À JOUR Avec les dernières versions d'Angular, le fichier barrel doit être édité comme ci-dessous,

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

5
Quand je fais l'équivalent de export * from './hero.model.ts', j'obtiens un message comme "'un chemin d'importation ne peut pas se terminer par un' .ts ''" Donc je change juste en export * from './hero.model'. Il vaut également la peine de répéter votre commentaire sur Angular ne recommandant plus de barils
The Red Pea

1
@TheRedPea merci pour l'indice. Je ne veux pas le changer parce que c'est une citation de (une version antérieure de la) page liée
Günter Zöchbauer

Savez-vous qu'il existe une bibliothèque d'aide ou une commande pour générer automatiquement index.js?
tom10271

1
@AlexanderAbakumov Puisqu'un composant, une directive ou un tube doit appartenir à un et un seul module, alors en ayant déclaré l'un des éléments ci-dessus dans un module, lorsque vous importez ce module, vous réalisez essentiellement la même chose ... en supposant que vous les exportiez également depuis le module.
rism

2
@Qwerty Je suis sûr que cela fonctionne avec le tremblement des arbres, mais l'utilisation de barils a été supprimée des pratiques suggérées il y a longtemps, je pense que lorsque les modules ont été introduits juste avant la version 1.0.
Günter Zöchbauer

29

index.tsest similaire index.jsdans nodejs ou index.htmlest l'hébergement de site Web.

Ainsi, quand vous dites import {} from 'directory_name'qu'il cherchera index.tsdans le répertoire spécifié et importera tout ce qui y est exporté.

Par exemple si vous avez calculator/index.tscomme

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

Tu peux faire

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

3
@FlowerScape L'exportation via l'index est particulièrement utile lors de la création de bibliothèques ou de code au niveau du module, afin que les utilisateurs finaux aient des importations moins détaillées. Il masque également tous les détails d'implémentation inutiles / déroutants du code importé.
Quinn Turner

Refactoring. Vous pouvez changer le code, par ex. renommer les fichiers, tant que vous conservez les exportations dans index.ts de la même manière.
user77115

3

index.ts aidez-nous à garder tous les éléments liés ensemble et nous n'avons pas à nous soucier du nom du fichier source.

Nous pouvons tout importer en utilisant le nom du dossier source.

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

Ici, util est le nom du dossier et non le nom du fichier qui a pour index.tsréexporter les quatre fichiers.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.