web-dev-qa-db-fra.com

Vous importez RxJS 6 dans le navigateur?

Maintenant que tous les modules javascript supportent les navigateurs modernes , j'essaie le code importing directement dans le navigateur. Nous pouvons obtenir des modules npm à partir de npkg.com , et j'ai trouvé le projet jspm , qui enveloppe les modules npm dans un format qui peut être consommé par le navigateur.

Mais j'ai toujours des problèmes, notamment avec RxJS . RxJS, à partir de la version 6, vous recommande d'importer des constructeurs et des opérateurs comme celui-ci:

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

Mais si j'essaye de le faire dans le navigateur avec:

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://dev.jspm.io/rxjs@6';
import { map, filter, switchMap } from 'https://dev.jspm.io/rxjs@6/operators';

Je reçois des erreurs dans ce sens:

SyntaxError non interceptée: le module demandé ' https://dev.jspm.io/rxjs@6/operators ' ne fournit pas d'export nommé 'map'

Je peux le contourner en important tout le module rxjs et en expliquant ce dont j'ai besoin, comme je le ferais avec un CDN:

import rxjs from 'https://dev.jspm.io/rxjs@6';
const { Observable } = rxjs;
import operators from 'https://dev.jspm.io/rxjs@6/operators';
const { map } = operators;

mais cela va à l'encontre de ce que l'équipe Rx essaie de faire pour réduire la taille finale du bundle, etc.

Je suis sûr que ce n'est pas seulement un problème RxJS.

Quelle est la solution ici pour que notre dev javascript (importé directement dans le navigateur) ressemble à ce que nous voudrions enfin passer à un bundler?

javascriptnpmrxjsjspmunpkg
12
nicholas

La syntaxe d'exportation du module es6 se trouve dans le sous-dossier _esm2015. Vous devez donc importer:

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://dev.jspm.io/rxjs@6/_esm2015';
import { map, filter, switchMap } from 'https://dev.jspm.io/rxjs@6/_esm2015/operators';

Malheureusement, vous ne pouvez pas simplement installer rxjs avec npm install rxjs@6 puis import dans le navigateur, car la source de distribution n'a pas l'extension de fichier .js dans les instructions import: https://unpkg.com/@reactivex/[email protected]/dist/esm2015/index.js .

Mais le navigateur a besoin des extensions de fichier pour import (pour le moment): ( https://developers.google.com/web/fundamentals/primers/modules#specifiers ):

// Not supported (yet):
import {shout} from 'jquery';
import {shout} from 'lib.mjs';
import {shout} from 'modules/lib.mjs';

// Supported:
import {shout} from './lib.mjs';
import {shout} from '../lib.mjs';
import {shout} from '/modules/lib.mjs';
import {shout} from 'https://simple.example/modules/lib.mjs';

Il existe également un problème pour cela: https://github.com/ReactiveX/rxjs/issues/4416 .

Pour l'instant, vous devez vous fier à https://jspm.io ou créer votre propre bundle (par exemple avec rollup comme suggéré par @Ovidiu Dolha).

3
iBaff

Voici un exemple simple de stackblitz de démarrage rxjs:

En bref:

Assurez-vous que vous disposez d'un script pour ajouter le fichier rxjs js (par exemple à partir d'un CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.js">

Tout est importé sous l'espace de noms rxjs, donc pour un exemple simple d'utilisation:

rxjs.of(1, 2, 3)
  .subscribe(x => {
    const element = document.createElement('div');
    element.innerText = 'Data: ' + x;
    document.body.appendChild(element)
  },
  err => { },
  () => {
    const element = document.createElement('div');
    element.innerText = 'All done';
    document.body.appendChild(element)
  });
3
Chris White