CommonJS vs ES Module: 자바스크립트 모듈 시스템

// 모듈 내보내기
module.exports = {
    someFunction: function() {},
    someValue: 42
};
 
// 또는
exports.someFunction = function() {};
exports.someValue = 42;
 
// 모듈 가져오기
const myModule = require('./myModule');

// named export
export const someFunction = () => {};
export const someValue = 42;
 
// default export
export default class MyClass {};
 
// 모듈 가져오기
import { someFunction, someValue } from './myModule';
import MyClass from './myModule';
import * as myModule from './myModule';

// math.js
function add(a, b) {
    return a + b;
}
 
// utils.js
function add(str1, str2) {    // 이름 충돌! 전역 스코프의 add 함수를 덮어씀
    return str1 + str2;
}

<!-- 순서가 매우 중요했음 -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>    <!-- jquery 의존성 필요 -->
<script src="app.js"></script>         <!-- 위 라이브러리들 의존성 필요 -->

// 전역 오염을 피하기 위한 네임스페이스 패턴
var MyApp = {
    math: {
        add: function(a, b) {
            return a + b;
        }
    },
    utils: {
        add: function(str1, str2) {
            return str1 + str2;
        }
    }
};

// math.js
export function add(a, b) {
    return a + b;
}
 
// utils.js
export function add(str1, str2) {    // 다른 모듈이라 이름 충돌 없음
    return str1 + str2;
}
 
// app.js
import { add as mathAdd } from './math.js';
import { add as stringAdd } from './utils.js';

// 의존성이 자동으로 관리됨
import { Component } from 'react';
import { render } from 'react-dom';
import { MyComponent } from './components/MyComponent';

// module.js
const privateFunction = () => {    // 모듈 내부에서만 접근 가능
    return 'private';
};
 
export const publicFunction = () => {    // 외부로 공개할 기능만 export
    return privateFunction();
};

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
 
// app.js
import { add, subtract } from './utils';  // 필요한 것만 가져올 수 있음
import * as utils from './utils';         // 전체를 가져올 수도 있음

// 반드시 동일한 이름을 사용해야 함 (as로 별칭은 가능)
import { add as sum, subtract as minus } from './utils';

// 빌드 타임에 사용되는 export를 파악할 수 있음
export const config = {
    api: 'https://api.example.com',
    timeout: 5000
};

// MyComponent.js
const MyComponent = () => {
    return <div>Hello</div>;
};
 
export default MyComponent;
 
// app.js
import MyComponent from './MyComponent';    // 중괄호 없이 임포트
import CustomName from './MyComponent';     // 원하는 이름으로 임포트 가능

// math.js
export default function add(a, b) {
    return a + b;
}
 
// 다른 파일에서
import sum from './math';         // 원하는 이름으로 임포트
import addition from './math';    // 이름이 달라도 동작

// utils.js
export const formatDate = (date) => { /* ... */ };
export const formatCurrency = (amount) => { /* ... */ };
export const formatNumber = (num) => { /* ... */ };

// UserProfile.js
class UserProfile extends Component {
    /* ... */
}
 
export default UserProfile;

// api.js
export const BASE_URL = 'https://api.example.com';
export const getHeaders = () => { /* ... */ };
 
export default class ApiClient {
    /* ... */
}

// 🚫 잘못된 사용
const myModule = require('./esModule'); // ES 모듈을 CommonJS로 임포트
import { something } from './commonjsModule'; // CommonJS를 ES 모듈로 임포트

{
    "type": "module" // ES Module 사용
    // 또는
    "type": "commonjs" // CommonJS 사용
}

// ES Module에서 CommonJS 모듈 사용
import cjsModule from 'cjs-module';
const { createRequire } = require('module');
const require = createRequire(import.meta.url);