如何从'Rx`导入`Observable`（非角度）

Question

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

这就是我做的

import {Observable} from 'rxjs/Rx';

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

在这种情况下， Observable是undefined 。 所以我试过了

import Observable from 'rxjs/Observable';

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

最后我做到了

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');

我得到Observable是undefined 。 如果我这样做

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>

Answer 1

正如它在README中所说，你可以使用import { Observable } from 'rxjs/Observable'; ：

仅通过修补导入所需内容（这对于大小敏感的捆绑非常有用）

这为您提供了一个非常小的Observable ，您需要明确添加您计划使用的任何额外功能; 在您的情况下，请遵循：

import 'rxjs/add/observable/fromEvent';

Answer 2

从TypeScript转换时，我遇到了完全相同的问题。 然后我切换到使用完全相同的选项的编译脚本，它工作，所以我怀疑它与转换脚本有关。 糟糕的是，可能没有简单的方法来检查它生成的代码。

无论如何，不​​同类型的进口如下：

1. import {Observable} from 'rxjs/Rx'

   由于您正在使用baseURL选项，因此将查找文件node_modules/rxjs/Rx.js 这是RxJS的入口点，它需要所有Observables，Subjects，operator等等...（大约300个文件）并且你只导入Observable类。

2. import Observable from 'rxjs/Observable'

   这只导入node_modules/rxjs/Observable.js文件及其依赖项（大约20个文件）。

3. import Rx from 'rxjs/Rx'

   这根本不起作用。 RxJS不会导出任何Rx 。 你可以在src/Rx.ts看看自己

如果您正在加载单个文件，则可以使用类似的配置：

System.config({
  packages: {
    'src': {
      defaultExtension: 'js'
    },
    'rxjs': {
      defaultExtension: 'js'
    }
  },
  paths: {
    'npm:': 'node_modules/',
    'main': 'src/index'
  },
  map: {
    'rxjs': 'npm:rxjs'
  }
});

然后所有导入都作为单个文件加载。 例如rxjs/util/isFunction = /node_modules/rxjs/util/isFunction.js 。

这在浏览器中不是很有用，因为它会非常慢。 但是，您可以使用通配符*加载捆绑的版本。 请注意，这仅适用于SystemJS 0.19。*：

System.config({
  packages: {
    'src': {
      defaultExtension: 'js'
    },
    'rxjs': {
      defaultExtension: 'js'
    }
  },
  paths: {
    'npm:': 'node_modules/',
    'main': 'src/index',
    'rxjs*': 'node_modules/rxjs/bundles/Rx.min.js'
  }

在SystemJS 0.20。*中，通配符*不再起作用（ https://github.com/systemjs/systemjs/issues/1039 ）

使用此配置，您可以使用all：

import {Observable} from 'rxjs';
import {Observable} from 'rxjs/Observable';
import {Observable} from 'rxjs/Rx';

请注意， node环境中的情况不同，因为您可以始终使用import {Observable} from 'rxjs'这要归功于其composer.json main选项。

Answer 3

由于我在我的项目中遇到同样的问题，我一直在尝试调试systemJs来理解。

现在我可以告诉systemJS基本上是这样的：它将模块文件转换为setter并执行。 setter加载依赖关系并将它们注入IIFE变量。 当setter全部设置时，execute运行模块代码。 这些是你在转变之前写的。

(function(System, SystemJS) {System.register(["node_modules/rxjs/Subject.js"], function (_export, _context) {
    "use strict";

    var Subject;
    return {
        setters: [function (_node_modulesRxjsSubjectJs) {
            Subject = _node_modulesRxjsSubjectJs.Subject;
        }],
        execute: function () {
            class PetriNode {
                constructor(name) {
                    this.from = [];
                    this.to = [];

......

我发现systemJS用这个项目加载模块

在这一行：第612行，RxJs种类的东西，所有加载都很好。

      err = dynamicExecute(link.execute, require, moduleObj.default, module);

执行后，module.exports和moduleObj .__ useDefault加载完全正常。 所有Rx类和输出都在那里。

但是所有默认值都失败，以便在此之后将COPIED转换为moduleObj：

然后，当调用setter时，输入的参数是moduleObj，它具有.default属性具有所有正确的输出，但是setter无法从moduleObj本身调用它们。

当所有Rx完成并开始处理我的ECMA2015模块时，第一次调用importerSetters。 每次没有导入但需要时都跳过它。

我不明白我应该如何使用import来处理带有.d.ts的commonJS默认值。 我已经看到systemJS之前可以处理commonJS和ECMA2015。 我是独立完成但不是一起完成的。

Answer 4

我遇到了类似的问题，设法取消阻止将我的tsconfig.json模块从“system”更改为“commonjs”，并且正在编译Rx lib文件而没有getter。

Answer 5

这似乎是一个已知问题。

https://github.com/systemjs/systemjs/issues/334

从文档ocumentation：

任何模块类型都可以从任何其他类型加载并完全支持。

从ES6中加载CommonJS，AMD或Global模块时，默认导出中可以使用完整模块，可以使用默认导入语法加载。

为方便起见，命名导出也是自动填充的，但可能没有按预期正确绑定，因此请谨慎使用。

./app/es6-loading-commonjs：

 // entire underscore instance import _ from './underscore.js'; // unbound named export import {map} from './underscore.js'; 

https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#inter-format-dependencies