[分享] 快速找到 RxJS 的 import 路徑的方法

如果你和我一樣總是傻傻分不清楚所使用的 RxJS 是來自 operator 和 observable 了話,然後總是背不起來運算子到底在哪裡,可以試試看下面這種查詢方式。

node_modules/rxjs/ 這裡路徑下,有個 Rx.d.ts 檔案,裡面 import 了所有方法,在這裡你會看到像下面這段程式碼:

...
import './add/observable/using';
import './add/observable/throw';
import './add/operator/catch';
import './add/operator/filter';
...

只要把所需要運算子複製至你的程式碼裡面,然後把 ./ 改成 rxjs/ 就 OK 了

如果覺得這樣還是很麻煩了話,可以直接在你的程式碼上面使用 import 'rxjs/Rx'; 也是 OK 的,只是這樣等於加入所有的運算子。

我手邊的項目實測,使用 import 'rxjs/Rx'; 和明確指定,這兩種作法會使的編譯後的
vendor.bundle.js 差了將近 500kb,在意檔案大小的朋友們可以測試看看。


如果之前有 import 'rxjs'; 這種寫法了話, ng lint 會提示你這寫法已列入黑名單 This import is blacklisted, import a submodule instead,建議改成明確指定(或也可以用 import 'rxjs/Rx'; 這個方式),這樣才不會報錯。

4個讚