Package Exports

@uupaa/dynamic-import-polyfill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uupaa/dynamic-import-polyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Dynamic import() polyfill

importModule() is a polyfill of dynamic import JavaScript function.

Prepare

npm i -S @uupaa/dynamic-import-polyfill

Browser support

Browser	`<script type="module">`	`import()` (js native)	`importModule()` (polyfill)
Chrome	61+	63+	61+
Chrome (Android)	61+	63+	61+
Safari	10.1+	11+	10.1+
Safari (iOS)	10.3+	11+	10.3+
Firefox	60+	67+	60+
Edge	16+	❌	16+
new Edge (Chromium based)	76+	76+	76+
IE	❌	❌	❌

Browser should supports are ES Modules(<script type="module">), Promise, Blob and window.URL functions.

import() function browser compatibilitiy resources:

Usage

async / await style

<script type="module">
import { importModule } from "https://uupaa.github.io/dynamic-import-polyfill/importModule.js";

(async() => {
  const Modules = {
    Lib1: "./Lib1.js",
    Lib2: "https://example.com/Lib2.js",
  };
  const { Lib1 } = await importModule(Modules.Lib1); // named export and import
  const { default: Lib2 } = await importModule(Modules.Lib2); // default export and import

  const lib1 = new Lib1();
  const lib2 = new Lib2();
  console.log( lib1.say() );
  console.log( lib2.say() );
})();

or Promise style.

<script type="module">
import { importModule } from "https://uupaa.github.io/dynamic-import-polyfill/importModule.js";

importModule("./Lib1.js").then(Lib1 => {
  const lib1 = new Lib1();
  console.log( lib1.say() );
});

Demo

<!DOCTYPE html><html>
<head>
<meta charset="utf-8"><title>dynamic-import-polyfill</title>
</head>
<body>
  <script type="module">
    import { importModule } from "../importModule.js";

    (async() => {
      const Modules = {
        a: "https://uupaa.github.io/dynamic-import-polyfill/test/a.js",
        b: "https://uupaa.github.io/dynamic-import-polyfill/test/b.js",
        c: "https://uupaa.github.io/dynamic-import-polyfill/test/c.js",
      };

      const usePolyfill = Date.now() % 2;

      if (usePolyfill) {
        console.log("use polyfill");
        const { a } = await importModule(Modules.a);
        const { default: b } = await importModule(Modules.b);
        const { c } = await importModule(Modules.c);
        console.log( a(), b(), c() );
      } else {
        console.log("use native");
        // use native
        const { a } = await import(Modules.a);
        const { default: b } = await import(Modules.b);
        const { c } = await import(Modules.c);
        console.log( a(), b(), c() );
      }
    })();
  </script>
</body>
</html>