• 安装设置
    • ES6
      • 安装
      • 设置
      • 陷阱
    • CommonJS
      • 安装
      • 设置
    • CDN 或 ES5

    安装设置

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

    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 的大小。