web-dev-qa-db-ja.com

ブラウザにRxJS 6をインポートしますか？

これで すべての最新のブラウザーはJavaScriptモジュールをサポートしています です。ブラウザーでimportingコードを試しています。 npkg.com からnpmモジュールを取得できます。_ 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';

これらの行に沿ってエラーが発生します：

キャッチされていない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の問題ではないと確信しています。

開発者のjavascript（ブラウザーに直接インポート）を最終的にバンドラーに渡したいもののようにするために、ここで先に進んでいるソリューションは何ですか？

javascriptnpmrxjsjspmunpkg
13
nicholas

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

悲しいことに、配布ソースのimportステートメントにファイル拡張子_npm install rxjs@6_がないため、ブラウザに_.js_を使用してrxjsをインストールし、次にimportをインストールすることはできません。 https://unpkg.com/@reactivex/[email protected]/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';
_

これにはissue： https://github.com/ReactiveX/rxjs/issues/4416 もあります。

現時点では、 https://jspm.io を使用するか、独自のバンドルを作成する必要があります（たとえば、@ Ovidiu Dolhaの提案に従ってrollupを使用）。

3
iBaff

以下は単純な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)
  });
3
Chris White