将 UMD Javascript 模块导入浏览器
Import UMD Javascript Modules into Browser
你好,我正在研究 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(.... 并观察错误控制台。
谢谢!
It imports with the global object namespace variable of '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
。
最近 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
这是正确导入后的示例,请注意管道。
submission = rxjs.fromEvent($('#mybutton'), 'click')
.pipe(rxjs.operators.map((event) => {
return "something"
}));
我可能会将全局变量重命名为 'r' 和 'ro' 以避免新的冗长。
如果有人能指出 6.0 中的管道错误处理,还有加分!
这是一个在 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')
多田
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;
};
重新格式化相同的代码
你好,我正在研究 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(.... 并观察错误控制台。
谢谢!
It imports with the global object namespace variable of '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
。
最近 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
这是正确导入后的示例,请注意管道。
submission = rxjs.fromEvent($('#mybutton'), 'click')
.pipe(rxjs.operators.map((event) => {
return "something"
}));
我可能会将全局变量重命名为 'r' 和 'ro' 以避免新的冗长。
如果有人能指出 6.0 中的管道错误处理,还有加分!
这是一个在 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')
多田
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;
};
重新格式化相同的代码