試圖了解RxJS導入

Question

我很難弄清楚此import語句的工作原理（在用Typescript編寫的Angular應用程序中）：

import 'rxjs/add/operator/toPromise';

我得到了rxjs映射到SystemJS配置文件中相應的node_modules子文件夾的信息，但隨后我被卡住了。 我看到有一個index.js文件，但沒有看到這是否或如何幫助解決add/operator/...部分。

同樣，我不明白這一點：

import {Observable} from 'rxjs/Observable';

同樣，此位置沒有文件Observable.*文件。 我想它可以通過index.js文件以某種方式起作用，但是我真的想獲得更全面的了解，因為我讀到它很容易偶然地導入所有RxJS，這會增加頁面加載時間。

我仔細閱讀了Typescript模塊解析文檔，但是我覺得這不足以解釋它。

更新：閱讀下面接受的答案后，我發現我一直在查看node_modules/rx目錄而不是node_modules/rxjs因此import語句與目錄結構完全匹配。

Answer 1

這很簡單，因為默認情況下TypeScript會查看node_modules目錄。

導入以下內容：

import {Observable} from 'rxjs/Observable';

解析為node_modules/rxjs/Observable.d.ts ，足以編譯代碼。

類似地，將rxjs/add/operator/toPromise導入解析為node_modules/rxjs/add/operator/toPromise.ts 。 順便說一句，您可以使用--traceResolution編譯器選項來查看要測試的TypeScript路徑。

當您擁有已編譯的JS（例如， commonjs格式）時，可以在node運行您的應用程序，因為它將調用require('rxjs/Observable') ，它將解析為node_modules/rxjs/Observable.js 。 然后類似地使用rxjs/add/operator/toPromise 。

請注意，RxJS github頁面的代碼結構與實際的npm包不同。 基本上，只有package.json和帶有已編譯的.js和.d.ts文件的src目錄上載到npm存儲庫（原始的.ts源文件位於node_modules/rxjs/src但是您永遠不想直接使用它們）。