Do czego służą wszystkie pliki index.ts?


136

Przyglądałem się kilku projektom początkowym i wszystkie komponenty wydają się mieć plik index.ts, który eksportuje * z tego komponentu. Nie mogę nigdzie znaleźć, do czego to faktycznie służy

Np. Https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Dzięki


1
Istotne dla tej dyskusji jest ta kwestia na githubie. Możesz go przeczytać przed użyciem plików beczkowych w swoim projekcie Angular
BeetleJuice

Odpowiedzi:


230

Z zarchiwizowanego glosariusza Angular.io v2 dla Barrel* :

Beczka to sposób na zgrupowanie eksportu z kilku modułów do jednego modułu wygody. Sam beczka jest plikiem modułu, który ponownie eksportuje wybrane eksporty innych modułów.

Wyobraź sobie trzy moduły w folderze bohaterów:

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

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

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

Bez beczki konsument potrzebowałby trzech oświadczeń importowych:

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

Możemy dodać beczkę do folderu bohaterów (nazywanego przez konwencję index), który eksportuje wszystkie te elementy:

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

Teraz konsument może importować to, czego potrzebuje, z beczki.

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

Każdy pakiet z zakresem kątowym ma beczkę o nazwie index.

Zobacz także WYJĄTEK: nie można rozwiązać wszystkich parametrów


* UWAGA: Barrel zostało usunięte z nowszych wersji słownika Angular .

AKTUALIZACJA W przypadku najnowszych wersji Angulara plik beczki należy edytować jak poniżej,

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

6
Kiedy robię odpowiednik export * from './hero.model.ts', otrzymuję komunikat typu „” ścieżka importu nie może kończyć się na „.ts” ”„ Więc po prostu zmieniam na export * from './hero.model'. Warto też powtórzyć komentarz o tym, że Angular nie poleca już beczek
The Red Pea.

1
@TheRedPea dzięki za podpowiedź. Nie chcę tego zmieniać, ponieważ jest to cytat z (wcześniejszej wersji) połączonej strony
Günter Zöchbauer

Czy wiesz, czy istnieje biblioteka pomocnicza lub polecenie do automatycznego generowania pliku index.js?
tom10271

1
@AlexanderAbakumov Ponieważ komponent, dyrektywa lub potok muszą należeć do jednego i tylko jednego modułu, to po zadeklarowaniu któregokolwiek z powyższych w module, kiedy importujesz ten moduł, zasadniczo osiągasz to samo ... zakładając, że również wyeksportowałeś je z moduł.
ryzm

2
@Qwerty Jestem całkiem pewien, że to działa z potrząsaniem drzewami, ale używanie beczek zostało usunięte z sugerowanych praktyk dawno temu, myślę, że kiedy wprowadzono moduły tuż przed 1.0.
Günter Zöchbauer

31

index.tsjest podobny index.jsw nodejs lub index.htmljest hostingiem stron internetowych.

Więc kiedy powiesz import {} from 'directory_name', będzie szukał index.tswewnątrz określonego katalogu i importował wszystko, co jest tam eksportowane.

Na przykład, jeśli masz calculator/index.tsas

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

Możesz to zrobić

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

3
@FlowerScape Eksportowanie za pośrednictwem indeksu jest szczególnie przydatne podczas tworzenia bibliotek lub kodu na poziomie modułu, aby użytkownicy końcowi mieli mniej szczegółowych importów. Ukrywa również wszelkie niepotrzebne / mylące szczegóły implementacji zaimportowanego kodu.
Quinn Turner

Refaktoryzacja. Możesz zmienić kod, np. zmienić nazwy plików, o ile zachowujesz te same eksporty w pliku index.ts.
user77115

3

index.ts pomóż nam zachować wszystkie powiązane rzeczy razem i nie musimy martwić się o nazwę pliku źródłowego.

Możemy zaimportować wszystko, używając nazwy folderu źródłowego.

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

Tutaj narzędzie to nazwa folderu, a nie nazwa pliku, który ma index.tsponownie wyeksportować wszystkie cztery pliki.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.