javascript - 如何从 `Observable` 导入 `Rx`(非 Angular )

标签 javascript ecmascript-6 rxjs systemjs rxjs5

我正在使用 SystemJS将我的 es2015 项目加载到浏览器中。

这是我做的

import {Observable} from 'rxjs/Rx';

const button = document.querySelector('button');
const start$ = Observable.fromEvent(button, 'click');

在这种情况下,Observableundefined。所以我尝试了

import Observable from 'rxjs/Observable';

在这种情况下,Observable 是一个对象,但是 Observable.fromEventundefined(它似乎是一个空对象)

我终于做到了

import Rx from 'rxjs/Rx' // Rx.Observable

确实有效。为什么其他两个不起作用的任何想法?我看过他们使用这些的代码。导入 Observable 的首选方法是什么?

更新:如下所述,所有内容均在 README 中进行了描述.但是,如果我这样做

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

const start$ = Observable.fromEvent(startButton, 'click');

我得到 Observableundefined。如果我这样做了

import Observable from 'rxjs/Observable';

Observable 又是一个空对象。未添加 fromEvent

我正在使用 RxJs 5.1.1,这是我的 index.html/systemjs 部分:

 <script src="./node_modules/systemjs/dist/system.js"></script>
  <script>
      SystemJS.config({
          baseURL: 'node_modules',
          packages: {
              '.': {
                  defaultJSExtensions: 'js'
              }
          },
          map: {
              'plugin-babel': 'systemjs-plugin-babel/plugin-babel.js',
              'systemjs-babel-build': 'systemjs-plugin-babel/systemjs-babel-browser.js'
          },
          transpiler: 'plugin-babel'
      });

      SystemJS.import('/js/main.js');
  </script>

最佳答案

正如它所说 in the README , 你可以使用 import { Observable } from 'rxjs/Observable';:

To import only what you need by patching (this is useful for size-sensitive bundling)

这为您提供了一个非常小的Observable,您需要向其中显式添加您计划使用的任何额外功能;在你的情况下,跟随它:

import 'rxjs/add/observable/fromEvent';

关于javascript - 如何从 `Observable` 导入 `Rx`(非 Angular ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42314480/

相关文章:

javascript - 使用包含 promise 的 createselector 来 react redux 容器

javascript - 如何突出显示我的文字

javascript - 使用字符串文字在 jsx 中传递动态 props

angular - RxJS Pipe 在 Angular Resolver 中不起作用(但在 ngOnInit 中工作正常)

javascript - Angular 4 中的 Observable 调用可以像 jquery 的同步 ajax 方式一样吗?

rxjs - 在多个服务调用上使用combineLatest时处理错误

javascript - React JS 将组件添加到特定的点击行

javascript - 对象获取相同的 api 端点

node.js - 为什么在 ES6 模块中导出的对象有未定义的方法?

javascript - 在 async 之外使用 await