angular - 试图理解 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因此导入语句与目录结构完美匹配。

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 但你永远不想直接使用它们)。