将UMD JavaScript模块导入浏览器

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这样的加载器，也没有启用任何实验性浏览器功能。 我没有使用任何'import'语句。

我只是尝试引用脚本对象的全局命名空间。模块定义的语法相同，除了Rx与rxjs之外。

要复制此错误，请简单地创建Observable.fromEvent（....并观察错误控制台即可。

谢谢！

- Neil

Answer 1

以下是一个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')

塔达

- Tom Aylott

---

你如何解决这个潜在的“未定义要求”错误？ - Brandon Ros

Answer 2

export default async function (url, module = {exports:{}})
{
    const response = await fetch(url);
    const script = await response.text();
    const func = Function("module", "exports", script)
    func.call(module, module, module.exports);
    return module.exports;
};

同样的代码重新格式化

- KillerKiwi

Answer 3

最近，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

- martin

---

管道一直是问题所在。我觉得我应该把所有东西都管起来，以防万一 :) 感谢您提供可能使用管道的微妙提示，如果没有这个提示，我仍然会在键盘上进行一些不错的头部敲打。 - Neil

Answer 4

这是一个例子，在正确导入后，请注意管道符号。

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

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

此外，如果有人能指出6.0中的管道错误处理，那就更好了！

- Neil

Answer 5

在浏览器中使用JavaScript从unpkg或jsdeliver导入任何umd模块，我发现最有用的是使用d3@require。因为实际导入umd模块会给我一个裸的“Module”对象。

在您的情况下，它将像这样工作，请注意我实际上不使用任何HTML，作为奖励，这也适用于deno。

import("https://raw.githack.com/d3/d3-require/main/src/index.mjs")
.then(
_=>_.require("https://unpkg.com/@reactivex/rxjs@5.5.6/dist/global/Rx.js")
)
.then(Object.keys)
.then(console.log)

现在，我来展示一个使用require的案例，其中我需要两个模块，一个是Rx库，另一个是一个检查器库，它可以将元素显示在控制台中。

import("https://raw.githack.com/d3/d3-require/main/src/index.mjs").then(async _=>{
    var inspector=await _.require("@observablehq/inspector");
var Rx=_.require("https://unpkg.com/@reactivex/rxjs@5.5.6/dist/global/Rx.js");
var x=new inspector.Inspector(window.inspect);
x.fulfilled(await Rx)
return x;
})

@import url("https://raw.githack.com/observablehq/inspector/main/src/style.css")

<div id="inspect" />

- Rainb

Answer 6

它与全局对象命名空间变量“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 进行操作。

- pretzelhammer

---

谢谢，我确实知道这个问题，这在文件中已经被观察到了。我实际上已经转向使用rxjs.fromEvent()，但是在map调用时仍然出现相同的错误，所以问题实际上是要转移到新的管道语法。 - Neil