¿Para qué se usan todos los index.ts?

Respuestas:

227

Desde la entrada archivada del glosario de Angular.io v2 para Barrel* :

Un barril es una forma de acumular exportaciones de varios módulos en un solo módulo de conveniencia. El barril en sí es un archivo de módulo que reexporta exportaciones seleccionadas de otros módulos.

Imagine tres módulos en una carpeta de héroes:

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

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

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

Sin un barril, un consumidor necesitaría tres declaraciones de importación:

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

Podemos agregar un barril a la carpeta de héroes (llamado índice por convención) que exporta todos estos elementos:

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

Ahora un consumidor puede importar lo que necesita del barril.

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

Los paquetes de alcance angular tienen un barril llamado índice.

Consulte también EXCEPCIÓN: no se pueden resolver todos los parámetros


* NOTA: Barrel se ha eliminado de las versiones más recientes del glosario angular .

ACTUALIZACIÓN Con las últimas versiones de Angular, el archivo de barril debe editarse como se muestra a continuación,

export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';
Günter Zöchbauer
fuente
55
Cuando hago el equivalente de export * from './hero.model.ts', recibo un mensaje como "'una ruta de importación no puede terminar con un' .ts ''" Así que simplemente cambio a export * from './hero.model'. También vale la pena repetir tu comentario acerca de que Angular ya no recomienda barriles
The Red Pea
1
@TheRedPea gracias por la pista. No quiero cambiarlo porque es una cita de (una versión anterior de la) página vinculada
Günter Zöchbauer
¿Sabes si hay alguna biblioteca auxiliar o comando para generar index.js automáticamente?
tom10271
1
@AlexanderAbakumov Dado que un componente, directiva o tubería debe pertenecer a un solo módulo, al declarar cualquiera de los anteriores en un módulo, cuando importa ese módulo, esencialmente logra lo mismo ... suponiendo que también los haya exportado desde el módulo.
Rism
2
@Qwerty Estoy bastante seguro de que esto funciona con sacudidas de árboles, pero el uso de barriles se eliminó de las prácticas sugeridas hace mucho tiempo, creo que cuando los módulos se introdujeron justo antes de 1.0.
Günter Zöchbauer
29

index.tses similar index.jsen nodejs oindex.html es el alojamiento de sitios web.

Entonces, cuando dices import {} from 'directory_name'que buscaráindex.ts dentro del directorio especificado e importará lo que se exporte allí.

Por ejemplo si tienes calculator/index.tscomo

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

Tu puedes hacer

import { add, multiply } from './calculator';
Arun Ghosh
fuente
3
@FlowerScape La exportación a través del índice es particularmente útil al crear bibliotecas o código a nivel de módulo, de modo que los usuarios finales tengan importaciones menos detalladas. También oculta los detalles de implementación innecesarios / confusos del código importado.
Quinn Turner
Refactorización Puedes cambiar el código, ej. cambie el nombre de los archivos, siempre que mantenga las exportaciones en index.ts igual.
user77115
3

index.ts ayúdenos a mantener todos los elementos relacionados juntos y no tenemos que preocuparnos por el nombre del archivo fuente.

Podemos importar todo usando el nombre de la carpeta de origen.

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

Aquí util es el nombre de la carpeta, no el nombre del archivo, que tiene index.tsque reexportar los cuatro archivos.

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