Importar o rxjs 6 no navegador?

Question

Importar o rxjs 6 no navegador?

Agora que todos os módulos javascript de suporte do navegador moderno , estou a tentar import o código está mesmo no navegador. Podemos obter módulos de npm unpkg.com , e eu encontrei o projetoJSPM , que envolve os módulos npm num formato que pode ser consumido pelo navegador.

mas ainda tenho problemas, principalmente com RxJS . RxJS, a partir da versão 6, recomenda a importação de construtores e operadores como este:

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

mas se eu tente fazer isso no navegador com:

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

tenho erros nestas linhas:

erro Sintaxerror: o módulo pedido ' https://dev.jspm.io/rxjs@6/operators ' não fornece uma exportação denominada ' map '

consigo contorná-lo importando todo o Módulo rxjs e provocando o que preciso, como se usasse um 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;

Mas isso derrota o que a equipe Rx está tentando fazer para diminuir o tamanho final do pacote, etc.

Eu sou claro que isto não é apenas um problema do RxJS.

Qual é a solução aqui em frente para fazer com que o nosso javascript dev (importação directamente para o navegador) se pareça com o que gostaríamos de passar para um bundler?

6

javascript npm rxjs jspm unpkg

Author: nicholas, 2018-05-12

Source

1 answers

score 2 · Answer 1

Aqui está um exemplo simples de StackBlitz rxjs.

https://stackblitz.com/edit/js-gm1qso

Resumindo:

Certifique-se que tem um programa para adicionar o ficheiro RxJS js (por exemplo a partir de um CDN)

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

Tudo é importado sob o espaço de nomes rxjs, por isso para um simples exemplo de Utilização:

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