rxjs - 构造 rxjs/Observable 时出错

Question

为什么下面的 TypeScript 代码可以编译，但是 systemjs 在运行时无法正确加载依赖？

import { Observable } from 'rxjs';
let temp123 = new Observable<String>();

但是，这是可行的:

import { Observable } from 'rxjs/Observable';
let temp123 = new Observable<String>();

具体来说，第一个代码会生成一个包含该代码的 .js 文件:

var Observable_1 = require('rxjs');
var temp123 = new Observable_1.Observable();

但是第二个代码会生成这个:

var Observable_1 = require('rxjs/Observable');
var temp123 = new Observable_1.Observable();

行 require('rxjs') 失败并出现 404 错误，因为那里没有文件。为什么typescript编译器能解决这个问题，而systemjs却不能在运行时加载？

同样值得注意的是: 这个问题只有在我对 Observable 执行某些操作时才会发生。例如，以下代码有效:

import { Observable } from 'rxjs';
let temp123: Observable<String> = null;
let xyz = temp123.first();

我可以使用 Observable，并在其上调用方法，而不需要 TypeScript 编译器生成 require('rxjs')。但是我不能构造一个，我也不能扩展它。

版本:TypeScript 2.0.3、Systemjs 0.19.27、rxjs 5.0.0-beta.12

Answer 1

Why is the typescript compiler able to resolve this, but systemjs cannot load it at runtime?

这就是它的工作方式:

当你写 import { Observable } from 'rxjs'; typescript 在 node_modules 中找到 rxjs 文件夹和 package.json 里面有

 "typings": "Rx.d.ts"

这是 rxjs 的类型声明文件，该文件包含

  export { Observable } from './Observable';

这使得 typescript 在同一文件夹中找到另一个类型声明文件，Observable.d.ts，该文件已导出 Observable 类的声明。

这足以让您的代码无错误地编译。

如果您的代码实际上没有尝试使用 Observable 作为值，它会起作用，因为 typescript 会 unused reference elision - 如果 Observable 仅用于类型检查，如在第二个示例中，则生成的 javascrpt 中不会有 require('rxjs') 调用。

现在，SystemJS。

SystemJS 没有任何默认位置来查找模块 - 它甚至不识别带有 main 属性的 package.json 文件的 node_modules 约定。

因此，您的示例中的 SystemJS 很可能是这样配置的:

    SystemJS.config({
        paths: {'npm:': 'node_modules/'},
        map: {'rxjs': 'npm:rxjs'},
        packages: {
            rxjs: {
            }
        }
    });

所以，这行导入的模块rxjs/Observable

import { Observable } from 'rxjs/Observable';

映射到

node_modules/rxjs/Observable.js

因为 rxjs 前缀匹配 map 条目，该条目与 paths 一起将其映射到 node_modules/rxjs

Observable 部分按原样完成

添加

.js 扩展名是因为 rxjs 与 systemjs 配置中的 rxjs 包匹配，并且对于属于包的任何模块，SystemJS自动添加 .js 扩展名，除非在该包配置中将 defaultExtension 设置为其他内容。

它可以工作，因为文件 node_modules/rxjs/Observable.js 存在。

该导入也适用于 typescript，因为 node_modules/rxjs/Observable.d.ts 也存在。

最后，这在运行时不起作用

import { Observable } from 'rxjs';

因为它映射到 node_modules/rxjs url，并且那里没有实际的文件。

您可以使用 SystemJS 包配置中的 main 属性来修复它:

        packages: {
            rxjs: {
                main: 'Rx.js'
            }
        }

现在它被映射到 node_modules/rxjs/Rx.js，并且该文件确实存在并导出了名为 Observable 的东西，所以它应该可以工作。

使用 SystemJS 0.19.43、rxjs 5.0.3、typescript 2.1.5 检查。