javascript - 将 UMD Javascript 模块导入浏览器

标签 javascript rxjs reactive-programming es6-modules umd

您好,我正在研究 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(.... 并观察错误控制台。

谢谢!

最佳答案

这是一个在 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')

多田

关于javascript - 将 UMD Javascript 模块导入浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51461723/

相关文章:

javascript - 如何让systemjs从全局格式的CDN加载模块?

angular - 在Angular服务中频繁使用BehaviorSubject是一个危险信号吗?

java - 响应式(Reactive)应用程序中的事务回滚

javascript - 转义正则表达式字符串?

javascript:如何按年龄对员工对象数组进行排序

javascript - 如何在 Angular 7 中管理多个可观察对象

typescript - 从结果创建 Observable<T>

typescript - vue 3 和 typescript - 当 ComputedRef<> 位于 React() 内部时,无法访问它;

Java Akka Actors - 消息限制和优先级

javascript - Angular 2+ 从注入(inject)动态模板的标记创建 ViewRef