将 UMD Javascript 模块导入浏览器答案

【问题标题】：Import UMD Javascript Modules into Browser将 UMD Javascript 模块导入浏览器
【发布时间】：2018-12-29 21:33:15
【问题描述】：

您好，我正在研究 RxJS。我只需在浏览器中引用它就可以使用该库：

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

它使用“Rx”的全局对象命名空间变量导入。我可以制作 observables 并做所有有趣的事情。

当我将 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(.... 并观察错误控制台。

谢谢！

【问题讨论】：

标签： javascript rxjs reactive-programming es6-modules umd

【解决方案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 进行。

【讨论】：

谢谢，我确实知道这一点，这在文件中被观察到。我实际上已经移到了 rxjs.fromEvent() 但是在 map 调用上发生了同样的错误，所以真正的问题是移到新的管道语法。

【解决方案2】：

最近 UMD 包已重命名为 rxjs，请参阅 https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d2911fe563068b8126098588db98a84
如果你想使用 RxJS 6 你需要切换到“pipable”操作符（和创建函数），见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

【讨论】：

管道一直是个问题。我觉得我应该把所有东西都管起来以防万一:)谢谢你可能管的细微差别，如果没有那个提示，我仍然会在键盘上做一些漂亮的头砸。

【解决方案3】：

这是一个正确导入后的示例，注意管道。

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

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

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

【讨论】：

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

多多

【讨论】：

如何解决潜在的“需要未定义”错误？

【解决方案5】：

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

重新格式化相同的代码

【讨论】：