⭐ES module

JS ⟩ module ⟩ ES module

⭐️ ES6 (2015)

ES modues are supported by browsers and servers, with a bit of configuration：

<!-- ⭐️ HTML (browser, client-side JS) -->
<!--    ╭──── ⭐️ ───╮ (module mode)    -->
<script type="module" src="script.js"></script>

// ⭐️ (Node.js, server-side JS)
// - add this line to "package.json" file
"type": "module",

🔴 主題

• default export

• browser-specific features

⭐️ 重點

• ES module imports happen before a module’s script starts running.

• import declarations may not appear inside functions or blocks❗

• names of dependencies must be quoted strings, not arbitrary expressions❗

ES module

• allows you to have both default export and named exports in one module, unlike CommonJS.

• works only via http(s)://, not locally (file://)❗️

• always works in strict mode❗️

• has its own top-level scope, top-level variables and functions from a module are not seen in other scripts❗️

• should export what they want to be accessible from outside and import what they need.

• can make global variables by explicitly assigning them to window, e.g. window.user = "John" (not recommended❗️) (👉🏻 compare with next point❗️)

• If the same module is imported multiple times, its code is executed only once, upon the first import❗️(⭐️ exports are generated & shared between importers)

bare modules

modules without any path are called “bare” modules.

• such modules are not allowed in import.

• references of imported JS files must start with: "/", "./", or "../"❗️

Note: module scripts usually use the ".mjs" extension to signal that it’s a module rather than a regular script. On the web, file extensions don’t really matter, as long as the files are served with the correct MIME type (e.g. text/javascript for JS files) in the Content-Type HTTP header.

The ".mjs" extension is especially useful on other platforms such as Node.js and d8, where there’s no concept of MIME types or other mandatory hooks such as type="module" to determine whether something is a module or a regular script. 📗 V8.dev ⟩ Dynamic import()

👥 相關

• 🛡️ ES module always works in strict mode.
• CSS import
• shorthand property

💈 範例

// ⭐️ import         ╭── ⭐️ ───╮
import {sayHi} from './sayHi.js';   // ⭐️ must start with: "/", "./", or "../"

// ⭐️ import all the exports
import * as moduleObj from './module.js'

// ⭐️ export
export { a, b };        // ⭐️ export { ... }
export { a as a2, b };  // ⭐️ export { A as B, ... }

// ⭐️ export default
export default obj;
import obj from "./module.js";    // ⭐️ without `{}`, not `{obj}`❗️
import defaultExport, {otherExport, ...} from "./module.js";

• replit ⟩

  • ES modules
  • module in browser

📗 參考

• JS.info ⟩

  • Modules
  • Export and Import
  • Dynamic imports
• V8.dev ⟩ Dynamic import() ⭐️⭐️⭐️
• web.dev ⟩ Using CSS Module Scripts to import stylesheets ⭐️
• Kyle ⟩ JS ES6 Modules ⭐️
• MakeUseOf ⟩ How to Import and Export Functions in JavaScript
• YDKJS: Scope & Closures (v.2) > Ch. 8 > Modern ES Modules

📘 手冊

• MDN ⟩

  • import.meta
  • import statement
  • <script> ⟩ async attribute

async scripts

• async scripts run immediately when ready, independently of other scripts or the HTML document.

• async has no effect on inline normal scripts. For module scripts, it works on inline scripts as well. (👉🏻 See: tab 2️⃣ above)

Cross-Origin Scripts

Scripts fetched from another origin (e.g. another site) require CORS headers, as described in the chapter Fetch: Cross-Origin Requests. 📗 JS.info ⟩ External scripts

<!-- another-site.com must supply Access-Control-Allow-Origin -->
<!-- otherwise, the script won't execute -->
<script type="module" src="http://another-site.com/their.js"></script>