将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（....并观察错误控制台即可。

谢谢！

解决方案

1. 最近，UMD软件包被重命名为 rxjs ，请参见 https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d29d2911fe563068b8126098588db98a84

如果要使用RxJS 6，则需要切换到可点入运算符（和创建函数），请参见> https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#operator-pipe -语法

例如，这可行：

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

Hi I am doing some research on RxJS. I am able to use the library simply by referencing it in my browser as such:

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

It imports with the global object namespace variable of 'Rx'. I can make observables and do all the fun stuff.

Where everything breaks down is when I change the src to point to the latest UMD file like this <script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>

The import seems to not be working as exported object functions don't seem to exist?

There is a specific function I am trying to use called 'fromEvent' that allows an observable to be created from any DOM event.

I am getting an error when using the latest RxJS 6.2.2 UMD file.

Why is this? If you look inside the js file at the bottom you can see the export of the function and at the top of the file you see the global namespace called 'rxjs'.

I am not using any loaders like requirejs nor do I have any experimental browser features enabled. I am not using any 'import' statements.

I am simply trying to reference the global namespace of the script object. The syntax for the module definition is identical except for Rx vs rxjs.

To replicate the error, simply create an Observable.fromEvent(.... and watch the error console.

Thanks!

解决方案

1. Recently the UMD bundle was renamed to just rxjs, see https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d2911fe563068b8126098588db98a84

2. If you want to use RxJS 6 you need to switch to "pipable" operators (and creation functions), see https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#operator-pipe-syntax

So for example this works:

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script>
rxjs.fromEvent(document, 'click').subscribe(console.log);
</script>

Demo: https://stackblitz.com/edit/rxjs6-demo-r2rtbz?file=index.html

这篇关于将UMD Javascript模块导入浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！