在浏览器中导入 RxJS 6？答案

【问题标题】：Importing RxJS 6 in browser?在浏览器中导入 RxJS 6？
【发布时间】：2020-09-30 23:19:56
【问题描述】：

现在all modern browser support javascript modules，我正在浏览器中尝试importing 代码。我们可以从unpkg.com 获取npm 模块，我找到了jspm 项目，它将npm 模块包装成可以被浏览器使用的格式。

但我仍然遇到问题，尤其是 RxJS。从版本 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';

我收到以下错误：

未捕获的语法错误：请求的模块“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（直接导入浏览器）看起来像我们最终想要传递给捆绑器的内容，这里的解决方案是什么？

【问题讨论】：

使用import 'rxjs/add/operator... 语法似乎更困难...我敢肯定答案并不简单，我要调查的（我手头有时间）是一种方法将 rxjs 的各个模块打包成单独的 es6 兼容单元。我认为可以使用 rollup 之类的东西来实现。

标签： javascript npm rxjs jspm unpkg

【解决方案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)
  });

【讨论】：

我认为这个答案并没有真正回答原始问题。问题不仅在于加载 rxjs，还在于以对 ESModules 友好的方式加载它。
如果你想使用运算符：var tap = rxjs.operators.tap; 然后rxjs.of(1,2,3).pipe(tap(value=>console.log(value)))
const 可能会更好，const tap = rxjs.operators.tap;
通过解构进一步改进，如const { debounceTime, tap } = rxjs.operators，现在您可以根据需要添加到列表中

【解决方案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';

遗憾的是，您不能在浏览器中使用npm install rxjs@6 和import 安装rxjs，因为分发源在import 语句中缺少文件扩展名.js： 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://dev.jspm.io/rxjs@6/_esm2015 将解析为 https://dev.jspm.io/rxjs@6/_esm2015/index.js

现在您必须依赖 https://jspm.io 或制作自己的捆绑包（例如，按照 @Ovidiu Dolha 的建议使用 rollup）。

【讨论】：