Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Import UMD Javascript Modules into Browser

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/[email protected]/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!

like image 670
Neil Avatar asked Jul 22 '18 03:07

Neil


People also ask

How are built in JavaScript modules added via browser?

Using Modules in the BrowserIt works by the browser downloading the module by making a GET request to do it. It's done asynchronously so that it's not blocking other things from loading. We can load a module in our code by defining the module and using a script tag to load it.

Can you import libraries in JavaScript?

Many (if not most) browser-side JavaScript libraries still support the “classic” way of loading libraries: you download the library, include it as a <script> tag, and the library creates a global variable that you use to access the library's functionality.

What is browser UMD?

It's called Universal Module Definition, or “UMD”. Basically, a UMD module is a JavaScript file that tries to guess at runtime which module system it's being used in, and then it acts as that kind of module.


2 Answers

  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

like image 52
martin Avatar answered Nov 10 '22 20:11

martin


Here's a oneliner to import UMD modules using browser modules and dynamic imports in 2020.

export default async (url, module = {exports:{}}) =>
  (Function('module', 'exports', await (await fetch(url)).text()).call(module, module, module.exports), module).exports

Usage example:

const ednToJS = await importUMD(`https://unpkg.com/[email protected]/dist/main.js`)
const rxjs = await importUMD('https://unpkg.com/[email protected]/bundles/rxjs.umd.js')

tada

like image 21
Tom Aylott Avatar answered Nov 10 '22 20:11

Tom Aylott