如何从`Rx`导入`Observable`（没有角度） [英] How to import `Observable` from `Rx` (not angular)

问题描述

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

I'm using SystemJS to load my es2015 project into the browser.

这是我做的

import {Observable} from 'rxjs/Rx';

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

在这种情况下可观察是未定义。所以我试过

In this case Observable is undefined. So I tried

import Observable from 'rxjs/Observable';

在这种情况下可观察是一个对象， Observable.fromEvent 是 undefined （似乎是一个空对象）

In which case Observable is an object but Observable.fromEvent is undefined (it seems to be an empty object)

最后我做了

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

哪些工作。任何想法为什么其他两个不起作用？我看到他们使用这些代码。进入可观察的首选方式是什么？

which did work. Any ideas why the other two didn't work? I have seen code in which they used these. What would be the preferred way to import Observable?

更新：如下所述，它在href =https://github.com/ReactiveX/rxjs#es6-via-npm =nofollow noreferrer> README 。但是，如果我这样做，那么从'rxjs / Observable'开始

UPDATE: As stated below its all described in the README. However if I do that

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

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

我得到可观察是未定义。如果我执行

import Observable from 'rxjs/Observable';

可观察是一个空对象。未添加 fromEvent 。

the Observable is an empty object again. The fromEvent is not added.

我正在使用RxJs 5.1.1，这里是我的index.html / systemjs部分：

I'm using RxJs 5.1.1 and here is my index.html/systemjs part:

 <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>

推荐答案

正如注意中的/github.com/ReactiveX/rxjs#es6-via-npmrel =nofollow noreferrer>，您可以使用'rxjs / Observable'中的 import {Observable}; ：

仅通过修补来导入所需的内容（这对于敏感尺寸敏感的捆绑）很有用） p>

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

这给你一个非常小的可观察，您需要明确添加任何计划使用的额外功能;在你的情况下，请遵循：

This gives you a very minimal Observable, to which you need to explicitly add any extra functionality you plan to use; in your case, follow it with:

import 'rxjs/add/observable/fromEvent';

这篇关于如何从`Rx`导入`Observable`（没有角度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！