Comment importer `Observable` de` Rx` (pas angulaire)

J'utilise SystemJS pour charger mon projet es2015 dans le navigateur.

C'est ce que j'ai fait

import {Observable} from 'rxjs/Rx'; const button = document.querySelector('button'); const start$ = Observable.fromEvent(button, 'click');

Dans ce cas, Observable est undefined . J'ai donc essayé

 import Observable from 'rxjs/Observable';

Dans ce cas, Observable est un objet, mais Observable.fromEvent est undefined (il semble être un objet vide)

Enfin, j'ai fait

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

Qui a fonctionné. Des idées pour lesquelles les deux autres n'ont pas fonctionné? J'ai vu un code dans lequel ils l'utilisaient. Quelle serait la manière privilégiée d'importer Observable ?

MISE À JOUR: Comme indiqué ci-dessous, tout est décrit dans README . Cependant, si je le fais

 import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/fromEvent'; const start$ = Observable.fromEvent(startButton, 'click');

Je sais que Observable est undefined . Et si je le fais

 import Observable from 'rxjs/Observable';

L' Observable est un objet vide à nouveau. Le fromEvent n'est pas ajouté.

J'utilise RxJs 5.1.1 et voici mon 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>

Comme il l'indique dans README , vous pouvez utiliser l' import { Observable } from 'rxjs/Observable'; :

Pour importer uniquement ce dont vous avez besoin par patch (cela est utile pour le groupage sensible à la taille)

Cela vous permet d'obtenir un minimum d' Observable , auquel vous devez ajouter explicitement toute fonctionnalité supplémentaire que vous envisagez d'utiliser; Dans votre cas, suivez-le avec:

 import 'rxjs/add/observable/fromEvent';

J'avais exactement le même problème lors de la transcription de TypeScript. Ensuite, j'ai changé pour utiliser les scripts compilés avec exactement les mêmes options et cela a fonctionné, donc je suis suspect, il a quelque chose à voir avec le transfert de votre script. Les mauvaises choses sont qu'il n'y a probablement pas de moyen facile de vérifier quel code il a généré.

Quoi qu'il en soit, les différents types d'importation sont les suivants:

import {Observable} from 'rxjs/Rx'

Comme vous utilisez l'option baseURL , cela recherchera le fichier node_modules/rxjs/Rx.js C'est le point d'entrée de RxJS qui requiert tous les Observables, les Sujets, l'opérateur, ainsi de suite … (environ 300 fichiers) et vous ne Observable classe Observable .
import Observable from 'rxjs/Observable'

Cela importe uniquement le node_modules/rxjs/Observable.js et ses dépendances (environ 20 fichiers).
import Rx from 'rxjs/Rx'

Cela ne devrait pas fonctionner du tout. RxJS n'exporte aucun Rx . Vous pouvez voir par vous-même à src/Rx.ts

Si vous chargez des fichiers individuels, vous pouvez utiliser une configuration similaire à celle-ci:

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

Ensuite, toutes les importations sont chargées sous forme de fichiers individuels. Par exemple, rxjs/util/isFunction = /node_modules/rxjs/util/isFunction.js .

Ce n'est pas très utile dans le navigateur car il sera très lent. Vous pouvez toutefois charger la version groupée avec le caractère générique * . Notez que cela ne fonctionne que dans 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' }

Dans SystemJS 0.20. * Le caractère générique * ne fonctionne plus ( https://github.com/systemjs/systemjs/issues/1039 )

Avec cette configuration, vous pouvez utiliser tout:

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

Notez que la situation dans l'environnement de node est différente car vous pouvez toujours utiliser simplement import {Observable} from 'rxjs' grâce à main option main dans son composer.json .