2017-04-27 27 views
8

Mam twardy czas na zastanawianie się, jak to dokładnie działa instrukcji import (w kątowym aplikacja napisana w maszynopisie):Próbując zrozumieć importu RxJS

import 'rxjs/add/operator/toPromise'; 

otrzymuję że rxjs jest odwzorowany z odpowiednią node_modules podfolder w pliku konfiguracyjnym SystemJS, ale utknąłem. Widzę, że istnieje plik index.js, ale nie widzę, czy i jak to pomaga rozwiązać część add/operator/....

Podobnie, nie rozumiem tego:

import {Observable} from 'rxjs/Observable'; 

Ponownie, nie ma pliku Observable.* plik w tym miejscu. Domyślam się, że działa jakoś poprzez plik index.js, ale naprawdę chciałbym uzyskać dokładniejsze zrozumienie, ponieważ przeczytałem, że łatwo jest zaimportować wszystkie RxJS przez przypadek, co wydłuża czas ładowania strony.

Z bliska przyjrzałem się dokumentacji dotyczącej modułu Typescript, ale mam wrażenie, że nie jest to wystarczające, by to wyjaśnić.

Aktualizacja: Po przeczytaniu zaakceptowane odpowiedź poniżej zorientowali się, szukałem w katalogu node_modules/rx zamiast node_modules/rxjs więc oświadczenia import pasuje idealnie ze strukturą katalogów.

Odpowiedz

5

To całkiem proste, ponieważ TypeScript domyślnie przegląda katalog node_modules.

Importowanie następujące:

import {Observable} from 'rxjs/Observable'; 

uchwala się, co node_modules/rxjs/Observable.d.ts co wystarcza do kompilacji kodu.

Podobnie importowanie rxjs/add/operator/toPromise jest rozwiązywane jako node_modules/rxjs/add/operator/toPromise.ts. Przy okazji można użyć opcji kompilatora --traceResolution, aby sprawdzić, jaka ścieżka TypeScript jest testowana.

Gdy masz skompilowane js (np. W formacie commonjs) można uruchomić aplikację w node ponieważ będzie to nazwać require('rxjs/Observable') który rozwiąże się node_modules/rxjs/Observable.js. Następnie podobnie z rxjs/add/operator/toPromise.

Należy pamiętać, że struktura kodu strony Github RxJS różni się od rzeczywistego pakietu NPM. Zasadniczo, tylko katalog package.json i src z kompilowanymi plikami .js i .d.ts są przesyłane do repozytorium npm (oryginalne pliki źródłowe .ts są w node_modules/rxjs/src, ale nigdy nie chcesz pracować bezpośrednio z nimi).

+0

O nie, patrzyłem na zły katalog ... "rx", a nie "rxjs". Teraz jest zupełnie jasne, dzięki! – lex82

+0

Martin, dlaczego użyli przedrostka '/ add'? To nie ma żadnego sensu. –

+0

@Royi Co nie ma sensu? Wszystkie pliki w katalogu '/ add/...' służą do dodania operatora do 'Observable.prototype' (np. Https://github.com/ReactiveX/rxjs/blob/master/src/add/operator/ buffer.ts). Pozwala to na używanie tylko tych operatorów, których faktycznie potrzebuję w moim projekcie, a zatem pakowacze JS z drżeniem drzew (rollup.js, webpack2 i może więcej) mogą generować mniejsze pakiety. – martin