Javascript 在浏览器中导入RxJS 6？

现在，我正在尝试在浏览器中导入代码。我们可以从中获取

npm

模块，我找到了这个项目，它将

npm

模块包装成一种可以被浏览器使用的格式

但我仍然有问题，最明显的是我的问题。从版本6开始，RxJS建议您像这样导入构造函数和运算符：

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

我得到的错误如下：

未捕获的语法错误：请求的模块“”未提供名为“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（直接导入到浏览器中）看起来像我们最终想要传递给bundler的东西，这里的解决方案是什么

下面是一个简单的rxjs入门示例stackblitz：

简言之：

确保您有一个脚本来添加rxjs文件（例如来自CDN）

---

es6模块导出语法位于子文件夹

\u esm2015

中。因此，您需要导入：

import{Observable，Subject，ReplaySubject，from，of，range}from'https://dev.jspm.io/rxjs@6/(2015);；
从导入{map，filter，switchMap}https://dev.jspm.io/rxjs@6/_esm2015/运营商”；

---

遗憾的是，您不能只使用

npm安装来安装rxjsrxjs@6

然后在浏览器中导入，因为分发源缺少

导入

语句中的文件扩展名

.js

：

但是浏览器需要导入文件扩展名（目前）：（）：

//尚不支持：
从“jquery”导入{shout}；
从'lib.mjs'导入{shout}；
从'modules/lib.mjs'导入{shout}；
//支持：
从'/lib.mjs'导入{shout}；
从“../lib.mjs”导入{shout}；
从'/modules/lib.mjs'导入{shout}；
从导入{shout}'https://simple.example/modules/lib.mjs';

这方面还有一个问题：

• 旁注：将决定

---

目前，您必须依靠或制作自己的捆绑包（例如，使用@Ovidiu Dolha建议的汇总）。

我认为这个答案并没有真正回答最初的问题。问题不仅在于加载rxjs，还在于以ESModules友好的方式加载它然后是（1,2,3）管道的

rxjs.of（tap（value=>console.log（value））

const

可能更好，

const-tap=rxjs.operators.tap通过解构进一步改进，如
const{debounceTime，tap}=rxjs.operators
，现在您可以根据需要添加到列表中，甚至更难的是使用
import'rxjs/add/operator…
语法。。。我相信答案并不简单，我要研究的（如果我手头有时间的话）是一种将rxjs的各个模块打包成各个es6兼容单元的方法。我认为可以使用类似于
rollup
的方法来实现。
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.js">

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