在浏览器中导入 RxJS 6？

Question

现在 all modern browser support javascript modules, I'm trying out importing code right in the browser. We can get npm modules from unpkg.com, and I've found the 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';

我在这些方面遇到错误：

Uncaught SyntaxError: The requested module 'https://dev.jspm.io/rxjs@6/operators' does not provide an export named '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（直接导入浏览器）看起来像我们最终想要传递给捆绑器的东西？

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

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

遗憾的是，您不能只在浏览器中安装 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://dev.jspm.io/rxjs@6/_esm2015 will resolve to https://dev.jspm.io/rxjs@6/_esm2015/index.js

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

在浏览器中导入 RxJS 6？

Importing RxJS 6 in browser?

javascript

npm

rxjs

jspm

unpkg