웹 브라우저의 동작 원리와 JavaScript 모듈 시스템

(function (exports, require, module, __filename, __dirname) {
  // 내부 모듈 코드는 실제로 여기에 들어갑니다.
});

시작
모듈1 도르
모듈1 종료
모듈들 실행 중
모듈2 로드
모듈2 종료
모듈들 모두 실행 완료
모듈1 시작
모듈2 시작

모듈1 로드
모듈1 종료
module2 로드
module2 종료
시작
Hello World
모듈1 시작
module2 시작

// test.js
module.exports = {
  [globalThis.hello]: "world",
};

// index.js
const hello = "hello";
globalThis[hello] = hello;
const test = require("./test.js");
console.log(test[hello]);

// message.js
const greeting = "Welcome!";
module.exports = { content: greeting };

// main.js
const msg = require("./message");
console.log(msg.content); // 출력: Welcome!

// CommonJS
const fs = require("fs);

module.export = {...};

// ES Module
import fs from "fs";

export { ... };

// module1.cjs

console.log("모듈1 로드");

setTimeout(() => console.log("모듈1 시작"), 2000);

console.log("모듈1 종료");

console.log("시작");
const module1 = require("./module1.js");
console.log("모듈들 실행 중");
const module2 = require("./module2.js");
console.log("모듈들 모두 실행 완료");

// esmodule1.js

console.log("모듈1 로드");

setTimeout(() => console.log("모듈1 시작"), 2000);

console.log("모듈1 종료");

console.log("시작");
import "./esmodule.js";
console.log("Hello World");
import "./esmodule2.js";

// my-commonjs-module.cjs (CommonJS)
module.exports = {
  valueA: 10,
  valueB: "hello",
  myFunction: () => console.log("From CommonJS"),
};

// main.mjs (ES Module)
import { valueA } from "./my-commonjs-module.cjs";
console.log(valueA);

// moduleA.mjs (ESM)
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// main.mjs (ESM)
import { PI, add } from "./moduleA.mjs";

console.log(PI);
console.log(add(5, 2));