Question

我不太了解ES6模块，特别是在导入副作用时。

例如，在Angular项目中，我使用Rxjs库来使用observable。我需要使用ES6导入从该库导入函数和对象。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

//later in the code I'm using these imports like this in a method
return Obserable.of(....);

我的问题是进口：从'rxjs / Observable'导入{Observable};似乎可以理解：我正在从node_modules中的'rxjs / Obserable'导入Observable对象。

我的问题是导入'rxjs / add / observable / of'; 为什么不能从'rxjs /....';

中导入{of}

我读过import'...'不会导出任何对象或函数。它究竟做了什么？如果您不是出口'of'运营商，您如何使用它？何时使用import * / import {}或直接导入'...';

由于

Answer 1

这实际上是导入运营商的旧方法。

import 'rxjs/add/observable/of';实际上是of到Observable的原型方法。导入时，每个Observable对象都有of方法可用。这就是为什么你应该把这些导入行放在像app.module这样的根文件中的原因。但是，正如我在开始时告诉你的那样，这是旧的方式。

使用RxJs 5.5，可管理的运营商开始发挥作用。您可以而且应该按如下方式导入运算符/可观察量

import { of } from 'rxjs/observable/of';

const myObs = of('some value');

通过这种方式，操作员和可观察者变得树木可动。 Webpack不会将未使用的运算符放入输出包中。

<强>更新

假设您正在使用大量运算符，并在全局文件中添加了静态导入。过了一段时间，您重构了代码，而不再使用Observable.of。但是，让我们说你忘记了你已经在全局文件中导入了它。即使您不再使用of，您仍然会在输出包中获得of可观察代码。原型设计使您无法对代码进行树形摇动。我建议你看this。 Ben Lesh解释了可管道运算符和RxJs6。

使用Angular和rxjs导入ES6模块

1 个答案: