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

问题描述

我很难弄清楚此import语句的工作原理(在用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.

类似地，我不明白这一点:

Similarly, I don't understand this one:

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，因此import语句与目录结构完全匹配.

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屋！