Question

嗨，我正在研究RxJS。我可以通过在浏览器中像这样简单地引用它来使用该库：

<script src="https://unpkg.com/@reactivex/rxjs@5.5.6/dist/global/Rx.js"></script>

使用全局对象名称空间变量“ Rx”导入。我可以进行观察，并做所有有趣的事情。

一切崩溃的地方是当我将src更改为指向最新的UMD文件，例如<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>

导入似乎不起作用，因为似乎不存在导出的对象函数？

我正在尝试使用一个名为'fromEvent'的特定功能，该功能允许从任何DOM事件创建可观察对象。

使用最新的RxJS 6.2.2 UMD文件时出现错误。

这是为什么？如果您在底部的js文件中查看，则可以看到函数的导出，而在文件的顶部，则可以看到名为“ rxjs”的全局命名空间。

我没有使用任何诸如requirejs的加载器，也没有启用任何实验性浏览器功能。我没有使用任何“导入”语句。

我只是试图引用脚本对象的全局名称空间。除了Rx和Rxjs以外，模块定义的语法相同。

要复制错误，只需创建一个Observable.fromEvent（....并观察错误控制台。

谢谢！

Answer 1

它使用全局对象名称空间变量'Rx'导入。

也许版本5.5.6可以使用，但是您尝试使用的最新版本6.2.2却没有。它导出到全局名称空间的对象称为rxjs。如果您在浏览器中加载https://unpkg.com/rxjs/bundles/rxjs.umd.js，则会在UMD模块定义的源代码中看到以下内容：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ?                             factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory):
    (factory((global.rxjs = global.rxjs || {})));
}(this, (function (exports) { 'use strict'; // etc

如果您想使用fromEvent，可以通过rxjs.fromEvent来使用。

Answer 2

最近，UMD捆绑包已重命名为rxjs，请参阅https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d2911fe563068b8126098588db98a84
如果要使用RxJS 6，则需要切换到“可点入”运算符（和创建函数），请参见https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#operator-pipe-syntax

例如，这可行：

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script>
rxjs.fromEvent(document, 'click').subscribe(console.log);
</script>

演示：https://stackblitz.com/edit/rxjs6-demo-r2rtbz?file=index.html

Answer 3

以下是正确导入后的示例，请注意管道。

submission = rxjs.fromEvent($('#mybutton'), 'click')
    .pipe(rxjs.operators.map((event) => {
        return "something"
    }));

我可以将全局变量重命名为“ r”和“ ro”以避免新的冗长。

如果有人可以指向6.0中的管道式错误处理，则还可以加分！

Answer 4

这是在2020年使用浏览器模块和动态导入功能导入UMD模块的唯一途径。

export default async (url, module = {exports:{}}) =>
  (Function('module', 'exports', await (await fetch(url)).text()).call(module, module, module.exports), module).exports

用法示例：

const ednToJS = await importUMD(`https://unpkg.com/edn-to-js@0.1.2/dist/main.js`)
const rxjs = await importUMD('https://unpkg.com/rxjs@6.6.3/bundles/rxjs.umd.js')

tada

将UMD Javascript模块导入浏览器

4 个答案: