How can an existing library be loaded and run using JavaScript's ES6 Modules?

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

import {poly} from "thirdParty/poly"; 

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

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

1. I have a script called rafPolyfill.js which is a polyfill for window.requestAnimationFrame. I need to import it into the global scope and run it immediately as soon as it loads. This is easy to do with a <script> tag:

It runs and loads itself into the global scope. How is can this be done using ES6 modules?

2. I have another script called Font.js which is a pre-loader for fonts. It let's you create new font object like this:

   var font = new Font();

I used Font.js by loading it with a script tag, like this:

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

Without accessing, changing, or understanding the source code of this script, how is it possible to use ES6 modules to load and use the in the same way that I would with a <script> tag? I just need these scripts to run when they're loaded and take care of themselves.

A possible solution might be using the module Loader API:

.php?id=harmony:module_loaders

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

How can an existing library be loaded and run using JavaScript's ES6 Modules?

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

import {poly} from "thirdParty/poly"; 

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

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

1. I have a script called rafPolyfill.js which is a polyfill for window.requestAnimationFrame. I need to import it into the global scope and run it immediately as soon as it loads. This is easy to do with a <script> tag:

It runs and loads itself into the global scope. How is can this be done using ES6 modules?

2. I have another script called Font.js which is a pre-loader for fonts. It let's you create new font object like this:

   var font = new Font();

I used Font.js by loading it with a script tag, like this:

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

Without accessing, changing, or understanding the source code of this script, how is it possible to use ES6 modules to load and use the in the same way that I would with a <script> tag? I just need these scripts to run when they're loaded and take care of themselves.

A possible solution might be using the module Loader API:

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

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

• javascript
• import
• module
• ecmascript-harmony
• ecmascript-6

2 Answers 2

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

But there is a solution: SystemJS

https://github./systemjs/systemjs

It's a universal module loader for ES6 modules, AMD modules, and global scripts (anything you load with the <script> tag)

Does this or something close to this work for you?

var stuffFromPoly = import "thirdParty/poly"

Then you would call methods off of the object stored in stuffFromPoly.

If that's not quite it, could you expand your question a bit, I'm trying to guess at exactly what you mean and I may be a bit off.

Quick note post-'your update':

Are you opposed to using https://www.npmjs/package/es6-module-loader ? Or does that not quite solve the problem?

From the readme:

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

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

This polyfill implements the Loader and Module globals, exactly as specified in the 2013-12-02 ES6 Module Specification Draft and the System browser loader exactly as suggested in the sample implementation.