Импортировать RxJS 6 в браузер? - PullRequest
Новая
       37

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

0 голосов
/ 12 мая 2018

Теперь, когда все современные браузеры поддерживают модули javascript , я пробую import код прямо в браузере. Мы можем получить npm модули из 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 (импортируемый прямо в браузер) выглядел так, как мы хотели бы передать пакету?

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Синтаксис экспорта модуля 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#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';

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

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

0 голосов
/ 13 мая 2018

Вот простой пример для rxjs stackblitz:

Короче говоря:

Убедитесь, что у вас есть скрипт для добавления файла 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)
  });
...