Импортировать RxJS 6 в браузер?

Question

Теперь, когда все современные браузеры поддерживают модули JavaScript, я пробую importКод прямо в браузере. Мы можем получить npm модули от http://unpkg.com/, и я нашел проект jspm, который оборачивает npm модули в формате, который может быть использован браузером.

Но у меня все еще есть проблемы, особенно с RxJS. RxJS, начиная с версии 6, рекомендует импортировать конструкторы и операторы следующим образом:

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

Но если я попытаюсь сделать это в браузере с помощью:

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

Я получаю ошибки по этим направлениям:

Uncaught SyntaxError: Запрошенный модуль ' https://dev.jspm.io/rxjs@6/operators' не обеспечивает экспорт с именем 'map'

Я могу обойти это, импортируя весь rxjs модуль и дразнить то, что мне нужно, как я бы использовал 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;

но это побеждает то, что команда Rx пытается сделать, чтобы уменьшить окончательный размер пакета и т.д.

Я уверен, что это не просто проблема RxJS.

Какое решение здесь движется вперед, чтобы наш dev javascript (импортируемый непосредственно в браузер) выглядел так, как будто мы хотели бы передать пакету?

Answer 1

Вот простой стартовый пример rxjs stackblitz:

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

Короче:

Убедитесь, что у вас есть скрипт для добавления файла rxjs js (например, из CDN)

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

Все импортируется в пространство имен rxjs, поэтому для простого примера использования:

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

Answer 2

Синтаксис экспорта модуля es6 находится внутри подпапки _esm2015, Так что вам нужно импортировать:

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

---

К сожалению, вы не можете просто установить rxjs с npm install rxjs@6 а потом import в браузере, поскольку в источнике распространения отсутствует расширение файла .js в import заявления: https://unpkg.com/@reactivex/rxjs@6.3.3/dist/esm2015/index.js.

Но браузеру нужны расширения файла для import (на данный момент): ( https://developers.google.com/web/fundamentals/primers/modules):

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

Для этого также существует проблема: https://github.com/ReactiveX/rxjs/issues/4416.

• Sidenote: https://dev.jspm.io/rxjs@6/_esm2015 будет преобразован в https://dev.jspm.io/rxjs@6/_esm2015/index.js

На данный момент вы должны положиться на https://jspm.io/ или сделать свой собственный пакет (например, с накопительным пакетом, как предложено @Ovidiu Dolha).