ES6 Module Test Page

Read my Blog article about this.

How to use ES6 modules in an HTML Page:

• When Firefox, or lower than Safari 10.1, Chrome 61 or Edge 16, configure browser to support modules
  • Firefox: enter address about:config, switch dom.moduleScripts.enabled to true; Firefox also runs fine with file:/ protocol (loading page from local disk)
  • Chrome refuses to load modules when using the file:/ protocol ("blocked by CORS", "strict MIME type checking"), so you need to deploy your page-resources to some HTTP server)


• Set attribute type="module" in all script elements that want to import modules


• When you need to call module functions actively from page-callbacks,
  • create a global page object in a non-module-typed script element, then,
  • in another module-typed script element, import modules and set all used module-functions into the global page-object (using the same function name)
  • call the module-functions via page.functionName()


• Else write an adapter <script type="module"> element that connects page-callbacks with module functions (that way element-ids are duplicated just locally within the HTML file)

Example Sources

Tests

The two buttons below call the function foobar() in two different ways, like described above. This function is implemented in es6-modules.js. This module imports all other modules. For seeing the source of this HTML page es6-modules.html, click right mouse button and select menu item "View Page Source".