es-modules-utils's Introduction

Native ECMAScript modules utilities

Installation

With npm: npm install es-modules-utils
With yarn: yarn add es-modules-utils

Usage

no-module-fallback

Provides ability to use native ECMAScript modules (aka ES or ES6 modules, with native import/export) or the bundled JavaScript file if they are not supported.

The utility script is expected to be included in HTML, e.g.:

<script
            module="./module.js"
            no-module="./no-module.js"
            
            add-global-class
            add-global-variable
            
            src="es-modules-utils/no-module-fallback.js"
    >
    </script>

Params:

module="module-URL.js": the URL of the script file, which will be loaded if the browser DOES support native ECMAScript modules
no-module="no-module-URL.js": the URL of the script file, which will be loaded in case the browser DOES NOT support native ECMAScript modules
add-global-class: the binary attribute, which enables adding the <html class="esmodules"> if ES modules are supported, <html class="no-esmodules"> otherwise (can be used e.g. to show some animation till the ES module is loaded)
add-global-variable: the binary attribute, which enables adding the global Boolean variable window.esmodules=true/false (can be used e.g. to decide which method to use to include new scripts)

The solution uses the nomodule script attribute approach, which also can be used without the additional features like:

<script type="module" src="module-URL.js"></script>
<script nomodule src="no-module-URL.js"></script>

Demo live

Demo code

es-modules-utils's People

Stargazers

Watchers

es-modules-utils's Issues

Explain sentence in readme

I don’t understand what this means (possibly also mention why it is useful):

add-global-class: the binary attribute, if present makes the script to add the 'esmodules'/'no-esmodules' HTML classes to <html> element depending on the ES modules support in the browser