安装设置

本章的内容取自官方文档,但我尝试为你提供一些更多的信息以了解为什么,而且将所有内容都放在一个位置也是个不错的选择。官方文档

RxJS 库可以以多种不同的方式来使用,即 ES6CommonJSES5/CDN

ES6

安装

  1. npm install rxjs

设置

  1. import Rx from 'rxjs/Rx';
  2. Rx.Observable.of(1,2,3)

陷阱

import Rx from 'rxjs/Rx' 语句会导入整个库。对于测试各种特性这很方便,但对于生产环境这就不是一个好主意了,因为 RxJS 本身是个重量级的库。在一个更现实的场景中,你可能想要使用下面这种方式,只导入实际要使用的操作符:

  1. import { Observable } from 'rxjs/Observable';
  2. import 'rxjs/add/observable/of';
  3. import 'rxjs/add/operator/map';
  4. let stream$ = Observable.of(1,2,3).map(x => x + '!!!');
  5. stream$.subscribe((val) => {
  6. console.log(val) // 1!!! 2!!! 3!!!
  7. })

CommonJS

安装方法同 ES6

安装

  1. npm install rxjs

设置

设置是不同的

下面再次展示了对于测试非常便利的全部导入,但不适合在生产环境中使用

  1. var Rx = require('rxjs/Rx');
  2. Rx.Observable.of(1,2,3); // 等等

更好的方式:

  1. let Observable = require('rxjs/Observable').Observable;
  2. // 使用适合的方法为 Observable 打补丁
  3. require('rxjs/add/observable/of');
  4. require('rxjs/add/operator/map');
  5. Observable.of(1,2,3).map((x) => { return x + '!!!'; }); // 等等

如你所见,require('rxjs/Observable') 只提供了 Rx 对象,而我们需要深入到下一层级以找到 Observable 。

注意 require('path/to/operator') 用来获取应用中所需要导入的操作符。

CDN 或 ES5

如果我用的既不是 ES6,也不是 CommonJS 的话,那么还有另外一种方式:

  1. <script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>

注意,这会引入完整的库。因为是从外部引用的,所以不会影响 bundle 的大小。