CommonJS와 ESM의 차이점

// resolution-time/math-utils.cjs
console.log("math-utils.js 로딩 중");

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

module.exports = {
  add,
  subtract,
  multiply,
};

// resolution-time/string-utils.cjs
console.log("string-utils.js 로딩 중");

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function reverse(str) {
  return str.split("").reverse().join("");
}

function truncate(str, length) {
  return str.length > length ? str.substring(0, length) + "..." : str;
}

module.exports = {
  capitalize,
  reverse,
  truncate,
};

// resolution-time/commonjs-runtime.cjs
console.log("=== CommonJS 런타임 해석 데모 ===");

// 사용자의 입력을 받습니다.
const userChoice = process.argv[2];
console.log(`사용자가 선택한 값: ${userChoice}`);

// 런타임에 로드할 모듈을 결정 - 사용자의 입력에 따라 어떤 모듈을 로드할지 결정합니다.
let utils;
if (userChoice === "math") {
  // (1) 사용자가 math를 선택한 경우
  console.log("런타임에 수학 유틸리티 로딩 중...");
  utils = require("./math-utils.cjs");
} else if (userChoice === "string") {
  // (2) 사용자가 string을 선택한 경우
  console.log("런타임에 문자열 유틸리티 로딩 중...");
  utils = require("./string-utils.cjs");
} else {
  // (3) 사용자가 값을 입력하지 않은 경우
  console.log("런타임에 두 유틸리티 모두 로딩 중...");
  const mathUtils = require("./math-utils.cjs");
  const stringUtils = require("./string-utils.cjs");
  utils = { ...mathUtils, ...stringUtils };
}

// 런타임에 동적으로 로드된 모듈을 사용합니다.
if (userChoice === "math") {
  // (1) 사용자가 math를 선택한 경우
  console.log("수학 결과:", utils.add(5, 3));
} else if (userChoice === "string") {
  // (2) 사용자가 string을 선택한 경우
  console.log("문자열 결과:", utils.capitalize("hello world"));
} else {
  // (3) 사용자가 값을 입력하지 않은 경우
  console.log("수학 결과:", utils.add(5, 3));
  console.log("문자열 결과:", utils.capitalize("hello world"));
}

// 또 다른 예시: 함수 내에서 조건부 require를 사용합니다.
function getFormatterForType(type) {
  if (type === "number") {
    return require("./math-utils.cjs");
  } else {
    return require("./string-utils.cjs");
  }
}

console.log("\n함수 내에서 동적 로딩:");
const formatter = getFormatterForType("string");
console.log("포맷된 결과:", formatter.capitalize("dynamic loading"));

> node resolution-time/commonjs-runtime.cjs math
=== CommonJS 런타임 해석 데모 ===
사용자가 선택한 값: math
런타임에 수학 유틸리티 로딩 중...
math-utils.js 로딩 중
수학 결과: 8

함수 내에서 동적 로딩:
string-utils.js 로딩 중
포맷된 결과: Dynamic loading

// resolution-time/math-utils.mjs
console.log("math-utils.mjs 로딩 중");

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

// resolution-time/string-utils.mjs
console.log("string-utils.mjs 로딩 중");

export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function reverse(str) {
  return str.split("").reverse().join("");
}

export function truncate(str, length) {
  return str.length > length ? str.substring(0, length) + "..." : str;
}

// resolution-time/esm-static.mjs
// esm-static.mjs
console.log("=== ESM 정적 해석 데모 ===");

// ESM을 임포트는 컴파일 타임에 로드할 모듈이 결정됩니다.
import { add, multiply } from "./math-utils.mjs";
import { capitalize, reverse } from "./string-utils.mjs";

console.log("모든 임포트가 컴파일 타임에 해석되었습니다!");

// 사용자의 입력을 받습니다.
const userChoice = process.argv[2];
console.log(`사용자가 선택한 값: ${userChoice}`);

// 모듈이 이미 로드되어 있으므로, 사용할 함수를 선택합니다.
if (userChoice === "math") {
  // (1) 사용자가 math를 선택한 경우
  console.log("수학 결과:", add(5, 3));
  console.log("수학 결과:", multiply(4, 7));
} else if (userChoice === "string") {
  // (2) 사용자가 string을 선택한 경우
  console.log("문자열 결과:", capitalize("hello world"));
  console.log("문자열 결과:", reverse("hello"));
} else {
  console.log("수학 결과:", add(5, 3));
  console.log("문자열 결과:", capitalize("hello world"));
}

> node resolution-time/esm-static.mjs math
math-utils.mjs 로딩 중
string-utils.mjs 로딩 중
=== ESM 정적 해석 데모 ===
모든 임포트가 컴파일 타임에 해석되었습니다!
사용자가 선택한 값: math
수학 결과: 8
수학 결과: 28

// resolution-time/esm-dynamic.mjs
// esm-dynamic.mjs
console.log("=== ESM 동적 임포트 데모 ===");

// 사용자의 입력을 받습니다.
const userChoice = process.argv[2];
console.log(`사용자가 선택한 값: ${userChoice}`);

// ESM에서 동적으로 모듈을 로드합니다.
let utils;
if (userChoice === "math") {
  // (1) 사용자가 math를 선택한 경우
  console.log("수학 유틸리티를 동적으로 임포트 중...");
  utils = await import("./math-utils.mjs");
} else if (userChoice === "string") {
  // (2) 사용자가 string을 선택한 경우
  console.log("문자열 유틸리티를 동적으로 임포트 중...");
  utils = await import("./string-utils.mjs");
} else {
  // (3) 사용자가 값을 입력하지 않은 경우
  console.log("두 유틸리티를 모두 동적으로 임포트 중...");
  const [mathUtils, stringUtils] = await Promise.all([
    import("./math-utils.mjs"),
    import("./string-utils.mjs"),
  ]);
  utils = { ...mathUtils, ...stringUtils };
}

// 런타임에 동적으로 로드된 모듈을 사용합니다.
if (userChoice === "math") {
  // (1) 사용자가 math를 선택한 경우
  console.log("수학 결과:", utils.add(5, 3));
} else if (userChoice === "string") {
  // (2) 사용자가 string을 선택한 경우
  console.log("문자열 결과:", utils.capitalize("hello world"));
} else {
  // (3) 사용자가 값을 입력하지 않은 경우
  console.log("수학 결과:", utils.add(5, 3));
  console.log("문자열 결과:", utils.capitalize("hello world"));
}

// 함수 내에서 동적으로 모듈을 로드합니다.
async function getFormatterForType(type) {
  if (type === "number") {
    return await import("./math-utils.mjs");
  } else {
    return await import("./string-utils.mjs");
  }
}

console.log("\n함수 내에서 동적 로딩:");
const formatter = await getFormatterForType("string");
console.log("포맷된 결과:", formatter.capitalize("dynamic loading"));

=== ESM 동적 임포트 데모 ===
사용자가 선택한 값: math
수학 유틸리티를 동적으로 임포트 중...
math-utils.mjs 로딩 중
수학 결과: 8

함수 내에서 동적 로딩:
string-utils.mjs 로딩 중
포맷된 결과: Dynamic loading

//tree-shaking/package.json
{
  "name": "tree-shaking-demo",
  "version": "1.0.0",
  "description": "Demonstrates tree-shaking differences between CommonJS and ESM",
  "type": "module",
  "scripts": {
    "build": "webpack",
    "test-commonjs": "node commonjs-consumer.js",
    "test-esm": "node esm-consumer.mjs",
    "test-esm-multiple": "node esm-consumer-multiple.mjs"
  },
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

//tree-shaking/webpack.config.cjs
const path = require("path");

module.exports = {
  mode: "production", // tree-shaking을 포함한 최적화 활성화
  entry: {
    "commonjs-bundle": "./commonjs-consumer.cjs",
    "esm-bundle": "./esm-consumer.mjs",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    clean: true,
  },
  optimization: {
    usedExports: true, // tree-shaking 활성화
    sideEffects: false,
  },
  resolve: {
    extensions: [".js", ".mjs"],
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        type: "javascript/esm",
      },
    ],
  },
};

// tree-shaking/large-utils.cjs (CommonJS)
console.log("large-utils.js 로딩 중 - 모든 함수가 로드됩니다!");

// 수학 함수들
function add(a, b) {
  console.log("add 함수 호출됨");
  return a + b;
}

function subtract(a, b) {
  console.log("subtract 함수 호출됨");
  return a - b;
}

function multiply(a, b) {
  console.log("multiply 함수 호출됨");
  return a * b;
}

function divide(a, b) {
  console.log("divide 함수 호출됨");
  return a / b;
}

function power(a, b) {
  console.log("power 함수 호출됨");
  return Math.pow(a, b);
}

// 문자열 함수들
function capitalize(str) {
  console.log("capitalize 함수 호출됨");
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function reverse(str) {
  console.log("reverse 함수 호출됨");
  return str.split("").reverse().join("");
}

function truncate(str, length) {
  console.log("truncate 함수 호출됨");
  return str.length > length ? str.substring(0, length) + "..." : str;
}

// 배열 함수들
function sortArray(arr) {
  console.log("sortArray 함수 호출됨");
  return [...arr].sort();
}

function filterEven(arr) {
  console.log("filterEven 함수 호출됨");
  return arr.filter((num) => num % 2 === 0);
}

function sum(arr) {
  console.log("sum 함수 호출됨");
  return arr.reduce((total, num) => total + num, 0);
}

// 복잡한 유틸리티 함수들
function complexCalculation() {
  console.log("complexCalculation 함수 호출됨");
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

function heavyStringProcessing(str) {
  console.log("heavyStringProcessing 함수 호출됨");
  return str.repeat(10000).split("").reverse().join("");
}

// 모든 함수 내보내기
module.exports = {
  add,
  subtract,
  multiply,
  divide,
  power,
  capitalize,
  reverse,
  truncate,
  sortArray,
  filterEven,
  sum,
  complexCalculation,
  heavyStringProcessing,
};

// tree-shaking/commonjs-consumer.cjs
console.log("=== CommonJS Consumer ===");
console.log("large-utils.js에서 임포트 중...");

// CommonJS는 전체 모듈을 임포트합니다
const utils = require("./large-utils.cjs");

console.log("\nadd 함수만 사용:");
console.log("결과:", utils.add(5, 3));

console.log("\n주의: 'add'만 사용하지만, 모든 함수가 로드됩니다!");
console.log("이는 CommonJS가 전체 모듈 네임스페이스를 로드하기 때문입니다.");

// tree-shaking/large-utils.mjs (ESM)
console.log("large-utils.mjs 로딩 중");

// 수학 함수들
export function add(a, b) {
  console.log("add 함수 호출됨");
  return a + b;
}

export function subtract(a, b) {
  console.log("subtract 함수 호출됨");
  return a - b;
}

export function multiply(a, b) {
  console.log("multiply 함수 호출됨");
  return a * b;
}

export function divide(a, b) {
  console.log("divide 함수 호출됨");
  return a / b;
}

export function power(a, b) {
  console.log("power 함수 호출됨");
  return Math.pow(a, b);
}

// 문자열 함수들
export function capitalize(str) {
  console.log("capitalize 함수 호출됨");
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function reverse(str) {
  console.log("reverse 함수 호출됨");
  return str.split("").reverse().join("");
}

export function truncate(str, length) {
  console.log("truncate 함수 호출됨");
  return str.length > length ? str.substring(0, length) + "..." : str;
}

// 배열 함수들
export function sortArray(arr) {
  console.log("sortArray 함수 호출됨");
  return [...arr].sort();
}

export function filterEven(arr) {
  console.log("filterEven 함수 호출됨");
  return arr.filter((num) => num % 2 === 0);
}

export function sum(arr) {
  console.log("sum 함수 호출됨");
  return arr.reduce((total, num) => total + num, 0);
}

// 복잡한 유틸리티 함수들
export function complexCalculation() {
  console.log("complexCalculation 함수 호출됨");
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

export function heavyStringProcessing(str) {
  console.log("heavyStringProcessing 함수 호출됨");
  return str.repeat(10000).split("").reverse().join("");
}

// tree-shaking/esm-consumer.mjs
console.log("=== ESM Consumer ===");
console.log("large-utils.mjs에서 임포트 중...");

// ESM은 특정 함수만 임포트합니다
import { add } from "./large-utils.mjs";

console.log("\nadd 함수만 사용:");
console.log("결과:", add(5, 3));

console.log("\n주의: 'add' 함수만 임포트됩니다!");
console.log("다른 함수들은 이 모듈의 범위에 포함되지 않습니다.");

> npm run build
> tree-shaking-demo@1.0.0 build
> webpack

asset commonjs-bundle.js 1.79 KiB [emitted] [minimized] (name: commonjs-bundle)
asset esm-bundle.js 404 bytes [emitted] [minimized] (name: esm-bundle)
orphan modules 1.73 KiB [orphan] 1 module
modules by path ./*.cjs 2.41 KiB
  ./commonjs-consumer.cjs 528 bytes [built] [code generated]
  ./large-utils.cjs 1.89 KiB [built] [code generated]
./esm-consumer.mjs + 1 modules 2.14 KiB [built] [code generated]
webpack 5.100.0 compiled successfully in 216 ms

> ls -lh ./dist
total 16
-rw-r--r--@ 1 onlifecoding  staff   1.8K Jul 12 09:26 commonjs-bundle.js
-rw-r--r--@ 1 onlifecoding  staff   404B Jul 12 09:26 esm-bundle.js

// require-esm/async-math.mjs
console.log("async-math.mjs 로딩 중 (최상위 await가 있는 ESM)");

// 이 최상위 await는 require()가 작동하지 않게 합니다
const config = await Promise.resolve({ multiplier: 2 });

export function calculate(x, y) {
  return x * y * config.multiplier;
}

export const version = "1.0.0";

// require-esm/math.mjs
console.log("math.mjs 로딩 중 (ESM)");

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export const PI = 3.14159;

export default function calculate(x, y) {
  return x * y + PI;
}

// require-esm/test-node22-feature.js
console.log("=== Node.js 22 require(ESM) 기능 테스트 ===");
console.log("Node.js 버전:", process.version);

// 기능이 사용 가능한지 확인
if (process.features && process.features.require_module) {
  console.log("✅ require(ESM) 기능이 사용 가능합니다");
} else {
  console.log("❌ require(ESM) 기능이 사용 불가능합니다");
  console.log("다음과 같은 이유일 수 있습니다:");
  console.log("1. Node.js 22+ 버전을 사용하지 않는 경우");
  console.log("2. --experimental-require-module 플래그를 활성화해야 하는 경우");
}

console.log("\n" + "=".repeat(50));

// 테스트 1: 일반 CommonJS require
console.log("\n테스트 1: 일반 CommonJS 모듈");
try {
  const regularModule = require("./math.mjs");
  console.log("✅ ESM 모듈 require 성공");
  console.log("결과 타입:", typeof regularModule);
  console.log("사용 가능한 익스포트:", Object.keys(regularModule));
} catch (error) {
  console.log("❌ ESM 모듈 require 실패");
  console.log("오류:", error.code || error.message);
}

console.log("\n" + "=".repeat(50));

// 테스트 2: 최상위 await가 있는 ESM
console.log("\n테스트 2: 최상위 await가 있는 ESM");
try {
  const asyncModule = require("./async-math.mjs");
  console.log("✅ 이것은 작동하지 않아야 합니다!");
} catch (error) {
  console.log(
    "❌ 예상된 실패 - 최상위 await가 있는 ESM은 require할 수 없습니다"
  );
  console.log("오류:", error.code || error.message);
}

console.log("\n" + "=".repeat(50));

// 테스트 3: ESM import
console.log("\n테스트 3: 최상위 await가 있는 ESM import");
(async () => {
  try {
    const asyncModule = await import("./async-math.mjs");
    console.log("✅ ESM 모듈 import 성공");
    console.log("결과 타입:", typeof asyncModule);
    console.log("사용 가능한 익스포트:", Object.keys(asyncModule));
  } catch (error) {
    console.log("❌ 비동기 import로 ESM import 실패");
    console.log("오류:", error.code || error.message);
  }
})();

> node require-esm/test-node22-feature.js
=== Node.js 22 require(ESM) 기능 테스트 ===
Node.js 버전: v22.14.0
✅ require(ESM) 기능이 사용 가능합니다

==================================================

테스트 1: 일반 CommonJS 모듈
math.mjs 로딩 중 (ESM)
✅ ESM 모듈 require 성공
결과 타입: object
사용 가능한 익스포트: [ 'PI', '__esModule', 'add', 'default', 'multiply' ]

==================================================

테스트 2: 최상위 await가 있는 ESM
❌ 예상된 실패 - 최상위 await가 있는 ESM은 require할 수 없습니다
오류: ERR_REQUIRE_ASYNC_MODULE

==================================================

테스트 3: 최상위 await가 있는 ESM import
async-math.mjs 로딩 중 (최상위 await가 있는 ESM)
✅ ESM 모듈 import 성공
결과 타입: object
사용 가능한 익스포트: [ 'calculate', 'version' ]

⠋  TSC  Initializing type checker.../dist/some/services/kubernetes-job.service.js:315
                    mountPath: '/workspace'
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/@kubernetes/client-node/dist/index.js from /some/services/kubernetes-job.service.js not supported.
Instead change the require of index.js in /dist/some/services/kubernetes-job.service.js to a dynamic import() which is available in all CommonJS modules.
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at Object.<anonymous> (/dist/some/services/kubernetes-job.service.js:12:61) {
  code: 'ERR_REQUIRE_ESM'
}

// package.json
{
  "scripts": {
    "start:dev": "NODE_OPTIONS='--experimental-require-module' nest start --watch",
    "start:prod": "NODE_OPTIONS='--experimental-require-module' node dist/main.js"
  }
}