在浏览器中导入 RxJS 6？

Question

现在所有现代浏览器都支持 javascript 模块，我正在尝试在浏览器中直接编写代码。我们可以从

unpkg.com

获取

import

模块，并且我找到了 jspm 项目，它将 npm 模块包装成浏览器可以使用的格式。 但是我仍然遇到问题，尤其是

RxJS

。 RxJS，从版本 6 开始，建议您像这样导入构造函数和运算符： npm

但是如果我尝试在浏览器中执行此操作：

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

我收到以下错误：

未捕获的语法错误：请求的模块“

https://dev.jspm.io/rxjs@6/operators

”不提供名为“map”的导出

我可以通过导入整个

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

模块并梳理出我需要的内容来解决这个问题，就像我使用 CDN 一样：

rxjs

但这违背了 Rx 团队为减少最终捆绑包大小等所做的努力。 

我确信这不仅仅是 RxJS 的问题。

这里的解决方案是什么，可以让我们的开发 JavaScript（直接导入到浏览器中）看起来像我们最终想要传递给捆绑器的内容？

Answer 1

https://stackblitz.com/edit/js-gm1qso
简而言之：

确保您有一个脚本来添加 rxjs js 文件（例如来自 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;

所有内容都导入到 rxjs 命名空间下，因此这是一个简单的示例用法：

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

Answer 2

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

内。所以你需要导入：

_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

：

https://unpkg。 com/@reactivex/

[电子邮件受保护]/dist/esm2015/index.js. 但是浏览器需要

import

的文件扩展名（目前）：(

https://developers.google.com/web/fundamentals/primers/modules#specifiers

): import

还有一个

问题

：https://github.com/ReactiveX/rxjs/issues/4416 .

旁注：

https://dev.jspm.io/rxjs@6/_esm2015
• 将解析为https://dev.jspm.io/rxjs@6/_esm2015/index.js
目前您必须依赖

https://jspm.io

或制作自己的捆绑包（例如，按照 @Ovidiu Dolha 的建议使用 rollup）。

Answer 3

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

var button = document.querySelector("button");

var obs1 = rxjs.fromEvent(button, "click");

var obs2 = rxjs.interval(1000);

// obs2.subscribe((val) => {
//   console.log(val);
// });


obs1.pipe(rxjs.switchMap(() => obs2)).subscribe((val) => console.log(val));