Skip to content

uupaa/dynamic-import-polyfill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

About

Dynamic import() polyfill for browser.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published