A medida que la funcionalidad de nuestro carrito de compras crece, vamos a terminar con más y más módulos. Para cualquier importador, esto puede significar que habrá muchas declaraciones de importación y puede ser difícil de mantener.
Lo ideal sería enrollar todos nuestros módulos más pequeños en uno solo, llamémoslo shoppingCart.
Esto se hace a través de barriles . Los barriles son módulos que juntan muchos módulos individuales, reexportando sus declaraciones, creando así un único módulo cohesivo.
Definiendo un barril
Para definir un barril para nuestro Carro de la Compra, creamos un archivo llamado index.ts en la carpeta raíz del carro de la compra, que simplemente re-exporta nuestros otros módulos:
1234/// app/shoppingCart/index.tsexport{ProductService,Product}from$0027./shoppingCart/products.service$0027;export{CartComponent}from$0027./shoppingCart/cart.component$0027tipografía
Importar un barril
Un barril es como cualquier otro módulo, así que podemos importarlo de la misma manera. Sin embargo, definimos nuestro barril en un archivo llamado index.ts.
Como un servidor web que sirve una página por defecto, el proceso de resolución del módulo de escritura como el mismo concepto con index.ts.
Al resolver una declaración de importación, comprobará la ruta de referencia. Si es un directorio y hay un archivo index.ts, entonces la declaración de importación se resolverá:
12345/// Importación simple desde el barrelimport{ProductoServicio,Producto,Componente de la Cesta}de$0027./compraCarta$0027;// Exactamente lo mismo, pero hace referencia al módulo de índice directamenteimport{ProductoServicio,Producto,Componente de la Cesta}de$0027./compraCarta/índice$0027;tipografía
Refactorización más segura
Ahora tenemos un único módulo, shoppingCart.ts, que está destinado a ser utilizado dentro de la aplicación.
El uso de un barril ayuda cuando empezamos a hacer cualquier tipo de refactorización, que de otra manera puede llevar a un cambio de efecto dominó en la aplicación.
Decidimos que nuestro ProductService debe estar en una subcarpeta de «servicios». Esto significa que en todos los lugares donde el servicio es importado necesitaría la actualización de la ruta.
¡Sin usar un barril, esto podría ser un montón de lugares! Sin embargo, con el barril, sólo cambiamos la única declaración de exportación para que coincida:
12345/// app/shoppingCart/index.ts// Nuevo camino hacia productos.servicio.tsexport{ProductoServicio,Producto}de$0027./comprasCart/servicios/productos.servicio$0027;export{CartComponente}de$0027./comprasCart/cart.componente$0027tipografía
Incluso si decidimos renombrar el ProductService como ProductApiService, podemos exportar de nuestro barril una declaración de ProductService para permitir la compatibilidad retroactiva:
12345/// app/shoppingCart/index.ts// ProductService alias para ayudar a la compatibilidad con la exportación{ProductApiService,ProductApiServiceasProductService,Product}from$0027./shoppingCart/services/products.service$0027;export{CartComponent}from$0027./shoppingCart/cart.component$0027tipografía