将UMD Javascript模块导入浏览器



嗨,我正在研究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(….并查看错误控制台.

谢谢!

这里有一个在2020年使用浏览器模块和动态导入导入UMD模块的oneliner。

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

  1. 最近UMD捆绑包被重命名为仅rxjs,请参阅https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d2911f563068b8126098588db98a84

  2. 如果您想使用RxJS 6,您需要切换到"pipable"运算符(和创建函数(,请参阅https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#operator-管道语法

例如,这是有效的:

<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

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

相同代码重新格式化

下面是一个执行正确导入后的示例,请注意管道。

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

我可能会将全局变量重命名为"r"one_answers"ro",以避免新的冗长。

如果有人能在6.0中指出管道错误处理,也可以获得加分!

它使用全局对象命名空间变量"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进行。

要在使用JavaScript的浏览器中从unpkg或jsdeliver导入任何umd模块,我发现最有用的是使用d3@require.由于实际上导入umd模块给了我一个"裸";模块";对象

在你的情况下,它会这样工作,注意我实际上不使用任何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" />

最新更新