⭐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",

// ⭐️ 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

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>

Previousmodule Nextimport

Last updated 2 years ago

Was this helpful?