`Rx`からObservableをインポートする方法（角度でない）

Question

SystemJS私はes2015プロジェクトをブラウザに読み込みます。

これは私がObservableがundefinedである。この場合、

import {Observable} from 'rxjs/Rx'; 

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

をやったことです。だから私は最後に私が仕事をした

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

をした

（空のオブジェクトのようです）Observableが対象ですが、Observable.fromEventがundefinedであり、その場合には

import Observable from 'rxjs/Observable'; 

を試してみました。なぜ他の2つがうまくいかなかったのか？私は彼らがこれらを使ったコードを見てきました。 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は追加されません。それはin the READMEを指摘したよう

<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

、あなたが使用することができimport { Observable } from 'rxjs/Observable';：

がものだけをインポートするには、私はここにRxJs 5.1.1を使用してい

は私のindex.html/systemjs一部であり、 （これはサイズに敏感なバンドルに便利です）

これは非常に最小Observable、tを与えますo使用する予定の余分な機能を明示的に追加する必要があります。あなたの場合は、それに従ってください：

import 'rxjs/add/observable/fromEvent'; 

Answer 2

TypeScriptからtranspilingするとき、私はまったく同じ問題を抱えていました。それから私はコンパイルされたスクリプトをまったく同じオプションで使用するように切り替えました。それはうまくいきましたので、あなたのスクリプトを翻訳することとは何か関係があります。悪いことには、おそらくそれが生成したコードを確認する簡単な方法はありません。とにかく

次のように、輸入品のさまざまな種類があります：

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

   あなたがbaseURLオプションを使用しているので、これはファイルnode_modules/rxjs/Rx.jsを探します。 Observables、Subjects、operatorなどをすべて必要とするRxJSのエントリポイントです（約300ファイル）。Observableクラスだけをインポートします。

2. import Observable from 'rxjs/Observable'

   これはのみnode_modules/rxjs/Observable.jsファイルとその依存関係（約20ファイル）をインポートします。

3. import Rx from 'rxjs/Rx'

   これはまったく機能していないはずです。 RxJSはRxをエクスポートしません。

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

   はその後、すべての輸入は、単一のファイルとしてロードされます：あなたは、単一のファイルをロードしている場合は、この同様の設定を使用することができますsrc/Rx.ts

で自分で見ることができます。例えば、rxjs/util/isFunction = /node_modules/rxjs/util/isFunction.js。

非常に遅いので、これはブラウザであまり役に立ちません。ただし、バンドルされたバージョンはワイルドカード*でロードできます。これはSystemJS 0.19でのみ動作することに注意してください*：。。

：SystemJS 0.20で

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

はワイルドカード* *あなたはすべてを使用することができます。この設定では、それ以上（https://github.com/systemjs/systemjs/issues/1039）

を動作しません。

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

にmainオプションのおかげで常にimport {Observable} from 'rxjs'を使用できるので、node環境の状況が異なることに注意してください。

Answer 3

私のプロジェクトで同じ問題が発生しているので、私は理解するためにsystemJsをデバッグしようとしていました。

今私はsystemJSが基本的に次のように動作することが分かります： モジュールファイルをセッターに置き換えて実行します。 セッターは依存関係を読み込んでIIFE変数に注入します。 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 = []; 
 
        
 
... 
 
...

私が発見したこのライン内のthis project

とsystemJSロード・モジュール：ライン612、スタッフのRxJsの種類と、すべての負荷までの罰金。実行した後

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

、module.exportsはとmoduleObj .__ useDefaultは完全に罰金ロードされます。すべてのRxクラスと出力はそこにあります。

しかし、すべてのデフォルトは、この後のようmoduleObjにコピーの取得に失敗しましたされていますセッターが呼び出されたときに、入力引数は.DEFAULT性質を持っているmoduleObjは、すべての適切なを持っている、そして

そして、 setterはmoduleObjからの呼び出しに失敗しました。

すべてのRxが完了し、ECMA2015モジュールの処理を開始すると、importerSettersが初めて呼び出されます。インポートがないのに必要なたびにスキップされます。

インポート時に.d.tsでcommonJSのデフォルトをどのように処理すればよいのか分かりません。私はsystemJSがcommonJSとECMA2015を前に扱うことができることを見てきました。私はそれを独立していたが、一緒にはしなかった。

Answer 4

私は同様の問題に遭遇し、tsconfig.jsonモジュールを "system"から "commonjs"に変更してブロックを解除することができました.Rxのlibファイルはゲッタなしでトランスペイントされています。

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