Viewing: developer.mozilla.org

JavaScript
HTML
await

JavaScript JavaScript JavaScript Node.js

JavaScript Node.js JavaScript CommonJS AMD RequireJS webpack Babel

webpack

GitHub <canvas>

index.html
main.js
modules/
    canvas.js
    square.js

modules 2

canvas.js
- create() width height ID <div> div 2D ID
- createReportList() ID
square.js
- name 'square'
- draw()
- reportArea()
- reportPerimeter()

.mjs .js

.js .mjs V8

JavaScript
Node.js Babel

.js Content-Type JavaScript MIME text/javascript "The server responded with a non-JavaScript MIME type" MIME JavaScript .js MIME .mjs .mjs GitHub Pages Node.js http-server

.mjs Content-Type

.js

JavaScript .js .mjs .mjs .js

.mjs
<script type="module">

export

export const name = "square";

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

varletconst export

export

export { name, draw, reportArea, reportPerimeter };

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";

import from

JavaScript basic-modules /js-examples/module-examples/basic-modules .URL

bash

/js-examples/module-examples/basic-modules/modules/square.js

bash

./modules/square.js

main.js

: modules/square

main.js

const myCanvas = create("myCanvas", document.body, 480, 320);
const reportList = createReportList(myCanvas.id);

const square = draw(myCanvas.ctx, 50, 50, 100, "blue");
reportArea(square.length, reportList);
reportPerimeter(square.length, reportList);

: const import

URL URL URL

import { name as circleName } from "https://example.com/shapes/circle.js";
import { name as squareName, draw } from "./shapes/square.js";

URL

imports JSON URL URL URL URL URL URL

html

<script type="importmap">
  {
    "imports": {
      "shapes": "./shapes/square.js",
      "shapes/square": "./modules/shapes/square.js",
      "https://example.com/shapes/square.js": "./shapes/square.js",
      "https://example.com/shapes/": "/shapes/square/",
      "../shapes/square": "./shapes/square.js"
    }
  }
</script>

<script> JSON type importmap

URL

// Bare module names as module specifiers
import { name as squareNameOne } from "shapes";
import { name as squareNameTwo } from "shapes/square";

// Remap a URL to another URL
import { name as squareNameThree } from "https://example.com/shapes/square.js";

URL

// Remap a URL as a prefix ( https://example.com/shapes/)
import { name as squareNameFour } from "https://example.com/shapes/moduleshapes/square.js";

shapes/circle/ shapes/ shapes/circle/

Node.js JavaScript

HTMLScriptElement.supports()

if (HTMLScriptElement.supports?.("importmap")) {
  console.log("Browser supports import maps.");
}

Node.js JavaScript "square"

import { name, draw, reportArea, reportPerimeter } from "square";

URL JavaScript TypeError

square

html

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js"
    }
  }
</script>

import { name as squareName, draw } from "square";

(/) URL Node

: /

JSON lodash lodash/ /node_modules/lodash-es/ URL

json

{
  "imports": {
    "lodash": "/node_modules/lodash-es/lodash.js",
    "lodash/": "/node_modules/lodash-es/"
  }
}

import _ from "lodash";
import fp from "lodash/fp.js";

fp .js lodash/fp 1

URL

URL ./, ../, / URL

json

{
  "imports": {
    "https://www.unpkg.com/moment/": "/node_modules/moment/"
  }
}

Node npm

scopes

json

{
  "imports": {
    "cool-module": "/node_modules/cool-module/index.js"
  },
  "scopes": {
    "/node_modules/dependency/": {
      "cool-module": "/node_modules/some/other/location/cool-module/index.js"
    }
  }
}

/node_modules/dependency/ URL cool-module /node_modules/some/other/location/cool-module/index.js imports cool-module imports /node_modules/cool-module/index.js

URL

URL imports

json

{
  "imports": {
    "main_script": "/node/srcs/application-fg7744e1b.js",
    "dependency_script": "/node/srcs/dependency-3qn7e4b1q.js"
  }
}

dependency_script import JavaScript

JavaScript

JavaScript JSON JavaScript CSS CSSStyleSheet

JavaScript JSONCSSimport

import colors from "./colors.json" with { type: "json" };
import styles from "./styles.css" with { type: "css" };

./data.json JSON JavaScript CSSStyleSheet

console.log(colors.map((color) => color.value));
document.adoptedStyleSheets = [styles];

HTML

main.js HTML

type="module" <script> main.js

html

<script type="module" src="main.js"></script>

JavaScript <script> HTML

html

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

import export <script> type="module"

html

<script>
  import _ from "lodash"; // SyntaxError: import declarations may only appear at top level of a module
  // 
</script>
<script src="a-module-using-import-statements.js"></script>
<!-- SyntaxError: import declarations may only appear at top level of a module -->

HTML URL

: <link> rel="modulepreload"

file:// URL HTML JavaScript CORS
defer <script>
<script>
JavaScript

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="main"></div>
    <script>
      // var 
      var text = "Hello";
    </script>
    <script type="module" src="./render.js"></script>
  </body>
</html>

/* render.js */
document.getElementById("main").innerText = text;

text document Hello import/export type="module"

(named export) const

(default export) JavaScript CommonJS AMD (Json Orendorff ES6 In Depth: Modules "Default exports" )

basic-modules square.js randomSquare()

export default randomSquare;

export default

export default function (ctx) {
  // 
}

main.js

import randomSquare from "./modules/square.js";

randomSquare

import { default as randomSquare } from "./modules/square.js";

: as

draw() reportArea()

import export as

// -- module.js --
export { function1 as newFunctionName, function2 as anotherNewFunctionName };

// -- main.js --
import { newFunctionName, anotherNewFunctionName } from "./modules/module.js";

// -- module.js --
export { function1, function2 };

// -- main.js --
import {
  function1 as newFunctionName,
  function2 as anotherNewFunctionName,
} from "./modules/module.js";

renaming circle.js triangle.js

export

export { name, draw, reportArea, reportPerimeter };

main.js

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";
import { name, draw, reportArea, reportPerimeter } from "./modules/circle.js";
import { name, draw, reportArea, reportPerimeter } from "./modules/triangle.js";

"SyntaxError: redeclaration of import name" (: ) (Firefox )

import {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
} from "./modules/square.js";

import {
  name as circleName,
  draw as drawCircle,
  reportArea as reportCircleArea,
  reportPerimeter as reportCirclePerimeter,
} from "./modules/circle.js";

import {
  name as triangleName,
  draw as drawTriangle,
  reportArea as reportTriangleArea,
  reportPerimeter as reportTrianglePerimeter,
} from "./modules/triangle.js";

// in square.js
export {
  name as squareName,
  draw as drawSquare,
  reportArea as reportSquareArea,
  reportPerimeter as reportSquarePerimeter,
};

// in main.js
import {
  squareName,
  drawSquare,
  reportSquareArea,
  reportSquarePerimeter,
} from "./modules/square.js";

import * as Module from "./modules/module.js";

module.js Module

Module.function1();
Module.function2();

module-objects

export { name, draw, reportArea, reportPerimeter };

import * as Canvas from "./modules/canvas.js";

import * as Square from "./modules/square.js";
import * as Circle from "./modules/circle.js";
import * as Triangle from "./modules/triangle.js";

const square = Square.draw(myCanvas.ctx, 50, 50, 100, "blue");
Square.reportArea(square.length, reportList);
Square.reportPerimeter(square.length, reportList);

()

classes ES square.js

class Square {
  constructor(ctx, listId, length, x, y, color) {
    // 
  }

  draw() {
    // 
  }

  // 
}

export { Square };

main.js

import { Square } from "./modules/square.js";

const square = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, "blue");
square.draw();
square.reportArea();
square.reportPerimeter();

export * from "x.js";
export { name } from "x.js";

module-aggregation () shapes.js circle.jssquare.jstriangle.js modules shapes

modules/
  canvas.js
  shapes.js
  shapes/
    circle.js
    square.js
    triangle.js

export { Square };

shapes.js

export { Square } from "./shapes/square.js";
export { Triangle } from "./shapes/triangle.js";
export { Circle } from "./shapes/circle.js";

shapes.js

: shapes.mjs

main.js

import { Square } from "./modules/square.js";
import { Circle } from "./modules/circle.js";
import { Triangle } from "./modules/triangle.js";

import { Square, Circle, Triangle } from "./modules/shapes.js";

JavaScript

import() Promise

import("./modules/myModule.js").then((module) => {
  // 
});

: import()

dynamic-module-imports "Circle" ()"Square" ()"Triangle" () 3

index.html main.js

main.js document.querySelector()

const squareBtn = document.querySelector(".square");

squareBtn.addEventListener("click", () => {
  import("./modules/square.js").then((Module) => {
    const square = new Module.Square(
      myCanvas.ctx,
      myCanvas.listId,
      50,
      50,
      100,
      "blue",
    );
    square.draw();
    square.reportArea();
    square.reportPerimeter();
  });
});

Module.Square( /* ... */ ) Module.

HTML <script> type="module"

html

<script>
  import("./modules/square.js").then((module) => {
    // 
  });
  // 
  var btn = document.querySelector(".square");
</script>

await

await await

top-level-await

colors.json

json

{
  "yellow": "#F4D03F",
  "green": "#52BE80",
  "blue": "#5499C7",
  "red": "#CD6155",
  "orange": "#F39C12"
}

getColors.js colors.json

// 
const colors = fetch("../data/colors.json").then((response) => response.json());

export default await colors;

await colors colors

main.js

import colors from "./modules/getColors.js";
import { Canvas } from "./modules/canvas.js";

const circleBtn = document.querySelector(".circle");

//

colors

const square = new Module.Square(
  myCanvas.ctx,
  myCanvas.listId,
  50,
  50,
  100,
  colors.blue,
);

const circle = new Module.Circle(
  myCanvas.ctx,
  myCanvas.listId,
  75,
  200,
  100,
  colors.green,
);

const triangle = new Module.Triangle(
  myCanvas.ctx,
  myCanvas.listId,
  100,
  75,
  190,
  colors.yellow,
);

main.js getColors.js canvas.js colors

main.js Canvas

// 
const myCanvas = new Canvas("myCanvas", document.body, 480, 320);
myCanvas.create();
import { Canvas } from "./modules/canvas.js";
myCanvas.createReportList();
//

a b b a

// -- a.js --
import { b } from "./b.js";

// -- b.js --
import { a } from "./a.js";

// Cycle:
// a.js > b.js
//  ^         
//

ReferenceError

// -- a.js --
import { b } from "./b.js";

setTimeout(() => {
  console.log(b); // 1
}, 10);

export const a = 2;

// -- b.js --
import { a } from "./a.js";

setTimeout(() => {
  console.log(a); // 2
}, 10);

export const b = 1;

a b b a 2 export a b a b 2 console.log

a

// -- a.js (entry module) --
import { b } from "./b.js";

export const a = 2;

// -- b.js --
import { a } from "./a.js";

console.log(a); // ReferenceError: Cannot access 'a' before initialization
export const b = 1;

JavaScript a.js a.js b.js b.js a a

b a

// -- a.js (entry module) --
import { b } from "./b.js";

console.log(b); // 1
export const a = 2;

// -- b.js --
import { a } from "./a.js";

setTimeout(() => {
  console.log(a); // 2
}, 10);
export const b = 1;

b.js a.js b

JavaScript JavaScript SHA Node.js

window Node.js window process Node.js

JavaScript DOMNode process.env

typeof window === "undefined" Node.js DOM

// myModule.js
let password;
if (typeof process !== "undefined") {
  // Node.js  `process.env` 
  password = process.env.PASSWORD;
} else if (typeof window !== "undefined") {
  // 
  password = document.getElementById("password").value;
}

Node.js v18 fetch node-fetch API

// myModule.js
if (typeof fetch === "undefined") {
  // We are running in Node.js; use node-fetch
  globalThis.fetch = (await import("node-fetch")).default;
}
//

globalThis

Node.js API

.mjs text/javascript MIME JavaScript text/javascript MIME "The server responded with a non-JavaScript MIME type" JavaScript MIME
HTML file:// URL JavaScript CORS GitHub .mjs MIME
.mjs OS macOS .mjs .js x.mjs.js .mjs

JavaScript modules - v8.dev (2018)
ES modules: A cartoon deep-dive - hacks.mozilla.org (2018)
ES6 in Depth: Modules - hacks.mozilla.org (2015)
Exploring JS, Ch.16: Modules - Dr. Axel Rauschmayer

MDN

MDN 2026317

GitHub