Import an existing library using ES6 JavaScript modules

Question

How can I load and run an existing library using JavaScript ES6 modules?

For example, suppose I need to load an existing polyfill:

import {poly} from "thirdParty/poly"; 

How to run an imported poly script and load its properties into the current namespace without changing the source?

Here are two practical problems that will help clarify the problem I'm trying to solve:

• I have a script called rafPolyfill.js which is a polyfill for window.requestAnimationFrame. I need to import it into the global area and start it right after loading it right away. This is easy to do with the <script> :

It starts and loads into the global area. How can this be done with ES6 modules?

2. I have another script called Font.js which is a preloader for fonts. It allows you to create a new font object as follows:

   var font = new Font ();

I used Font.js, loading it with a script tag, for example:

 <script src="Font.js"><script> 

Without accessing, modifying, or understanding the source code of this script, how can I use ES6 modules to load and use the same as with the <script> ? I just need these scripts to run when they load and take care of themselves.

A possible solution would be to use the API Loader API:

http://wiki.ecmascript.org/doku.php?id=harmony:module_loaders

This document describes the global binding of the System loader, but I'm afraid I don't have the vocabulary to fully understand what it is trying to explain. Any help in decrypting this document would be greatly appreciated!

Answer 1

This answer is: "No, based on the ES6 specification, it is not possible to load and run a global script in the same way you can with a script tag.

But there is a solution: SystemJS

https://github.com/systemjs/systemjs

This is a universal module loader for ES6 modules, AMD modules and global scripts (everything that you load with the <script> )

Answer 2

Is this or something close to this for you?

 var stuffFromPoly = import "thirdParty/poly" 

Then you called methods from the object stored in stuffFromPoly .

If this is not entirely true, could you please expand your question a little, I try to guess what you mean, and I can refuse it a little.

Quick note post-'yourour update ':

Are you against using https://www.npmjs.org/package/es6-module-loader ? Or does this not completely solve the problem?

From the readme file:

The new ES6 module specification defines a module system in JavaScript using import and export syntax. For dynamically loaded modules, a dynamic factory module loader is also included in the specification (new loader).

A separate browser specification defines a dynamic loader for the ES6 module loader for the browser, window.System, as well as a tag for using modules.

This polyfill implements the Loader and Module global globules, exactly the same as specified in the draft ES6 Module Specification 2013-12-02 and the system browser loader, exactly as proposed in the example implementation.