JS: Module

What is JavaScript Module

• JS modules are JS files designed to be used as a library.
• JS file importing module is also a module.

How is JavaScript Module File Differ from Normal JavaScript File

• Module files contain export statement.
• Any JavaScript code (or file) containing import statement is also treated as module.
• Module files's top-level names are local to the file.
• Loading module file requires attribute type="module" in HTML tag script, and must be over HTTP server. (local files won't work).

Module File Name Extension

.mjs

File Name Extension for JS module files, used in node.js community. (non-standard)

.js

File Name Extension for JS file including module files. (standard)

Loading Module in HTML

Requires attribute type="module"

<script type="module" src="module_specifer"></script>

• JS: Module Specifer

🛑 WARNING: Any JavaScript file containing the import statement is also treated as a module, and must be loaded as module.

JavaScript Module code can be loaded as embeded code directly (i.e. no file.):

<script type="module">/* code */</script>

• Module files are loaded as defer by default.
• Attribute async can be used. It overrides the default defer behavior.

<script async type="module">/* code */</script>

• Module files are loaded only once, even if you specify it many times.

• JS DOM: Load Order, defer, async, module

Loading Module from JavaScript Code

• JS: Module. Static Import
• JS: Module. Dynamic Import

Loading Module Require HTTP (Cross Origin Error)

• Module file does not work over local file system. (You get a cross origin error.)
• Module must be loaded over HTTP server.

• Python: Start Python HTTP Server

Module runs in strict mode

Module runs in Strict Mode

Module Top-Level Name's Scope Are the Module File

For module files, top-level names (variable or function) have scope limited to the file. This is different from non-module JavaScript files, where top-level names have global scope, in fact they become properties of the the Global Object