试图理解 RxJS 导入 [英] Trying to understand RxJS imports

问题描述

我很难弄清楚这个导入语句究竟是如何工作的(在一个用 Typescript 编写的 Angular 应用程序中):

I'm having a hard time figuring out how exactly this import statement works (in an Angular application written in Typescript):

import 'rxjs/add/operator/toPromise';

我知道 rxjs 被映射到 SystemJS 配置文件中相应的 node_modules 子文件夹，但后来我卡住了.我看到有一个 index.js 文件，但我不知道这是否或如何帮助解决 add/operator/... 部分.

I get that rxjs is mapped to the respective node_modules subfolder in the SystemJS config file, but then I'm stuck. I see that there is an index.js file but I don't see whether or how this helps to resolve the add/operator/... part.

同样，我不明白这个:

import {Observable} from 'rxjs/Observable';

同样，这里没有文件 Observable.* 文件.我猜它以某种方式通过 index.js 文件工作，但我真的很想获得更彻底的理解，因为我读到很容易意外导入所有 RxJS，这会增加页面加载时间.

Again, there is no file Observable.* file in this place. I guess that it somehow works via the index.js file but I'd really like to get a more thorough understanding because I read that it is easy to import all of RxJS by accident which increases page load times.

我仔细查看了 Typescript 模块解析文档，但我觉得这不足以解释它.

I had a closer look at the Typescript module resolution documentation but I have the feeling that this is not sufficient to explain it.

更新:在阅读下面接受的答案后，我发现我一直在查看 node_modules/rx 目录而不是 node_modules/rxjs所以导入语句与目录结构完美匹配.

Update: After reading the accepted answer below I figured out I had been looking at the node_modules/rx directory instead of node_modules/rxjs so the import statements match perfectly with the directory structure.

推荐答案

这很简单，因为 TypeScript 默认查看 node_modules 目录.

It's pretty simple because TypeScript by default looks into node_modules directory.

导入以下内容:

import {Observable} from 'rxjs/Observable';

解析为 node_modules/rxjs/Observable.d.ts 这足以编译代码.

is resolved as node_modules/rxjs/Observable.d.ts which is enough to compile the code.

同样导入rxjs/add/operator/toPromise 解析为node_modules/rxjs/add/operator/toPromise.ts.顺便说一句，您可以使用 --traceResolution 编译器选项来查看测试了哪些 TypeScript 路径.

Similarly importing rxjs/add/operator/toPromise is resolved as node_modules/rxjs/add/operator/toPromise.ts. Btw you can use the --traceResolution compiler option to see what TypeScript path are tested.

当你编译了 JS(例如，以 commonjs 格式)你可以在 node 中运行你的应用程序，因为它会调用 require('rxjs/Observable') 将解析为 node_modules/rxjs/Observable.js.然后与 rxjs/add/operator/toPromise 类似.

When you have your compiled JS (eg. in commonjs format) you can run your app in node because it'll call require('rxjs/Observable') which will resolve to node_modules/rxjs/Observable.js. Then similarly with rxjs/add/operator/toPromise.

请注意，RxJS github 页面的代码结构与实际的 npm 包不同.基本上，只有 package.json 和 src 目录和编译后的 .js 和 .d.ts 文件被上传到 npm 存储库(原始 .ts源文件位于 node_modules/rxjs/src 中，但您永远不想直接使用它们).

Be aware that the code structure of RxJS github page is different than the actual npm package. Basically, just the package.json and the src dir with compiled .js and .d.ts files are uploaded to the npm repository (the original .ts source files are in node_modules/rxjs/src but you never want to work directly with them).

这篇关于试图理解 RxJS 导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！