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

132

He estado mirando algunos proyectos semilla y todos los componentes parecen tener un index.ts que exporta * desde ese componente. ¿No puedo encontrar en ninguna parte para qué se usa realmente?

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

Gracias

angular

— Zetki
fuente

Relevante para esta discusión es este problema en github. Es posible que desee leerlo antes de usar archivos barril con su proyecto Angular

— BeetleJuice

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

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

@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

@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

@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

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

@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

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