试图理解 RxJS 导入

Question

我很难弄清楚这个导入语句究竟是如何工作的（在一个用 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 因此导入语句匹配完美配合目录结构。

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 和 src 目录以及已编译的 .js 和 .d.ts 文件被上传到 npm 存储库（原始 .ts 源文件在 node_modules/rxjs/src 但你永远不想直接与他们一起工作）。