ESmodule 과 CommonJs 비교 (mjs, cjs)

1. 구문

ESmodule

import {useState} from "reacrt"

export = {}

 

CommonJs

const {useState} = require("react")

module.exports = {}

 

2.동작 방식

ESmodule

1. 모듈을 비동기 환경에서 다운로드(import, export)
2. 정적모듈 시스템으로 의존성을 파악하고 필요한 모듈을 미리 로딩함으로써 오류를 사전에 감지
3. package.json에 type: module 을 사용하거나 .mjs 확장자를 사용
4. this는 undefinde 이다.
5. 순환의존성 지원: 인스턴스가 생성되어 독립적인 스코프를 가지게 된다.(변경된값이 적용됨)
6. entry point를 기점으로 import문을 따라가며 찾는다.
7. Top-level await 가능하다

// esmodule.mjs

import {num} from "./esmoduleNum.mjs"

const test = await num();
console.log(test)

// esmoduleNum.mjs

function num (){

    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve("ESmodule모듈")
        },2000)
    })
}

export {num};

 

 

CommonJs

1. 모듈을 동기적으로 다운받음(require, module.export)
2. 동적 모듈시스템으로 실행후에 의존성 오류를 확인할수 있다.
3. 기본적으로 설정되어 있으며, .js 확장자의 파일이 CommonJs로 간주된다. .cjs 확장자를 사용하여 구분 할 수 있다.
4. this는 현재 모듈을 가리킨다.
5. 순환의존성 지원하지않음: 모듈이 한번 로드되면 캐시에 저장된다. (변경된 값이 적용되지않음)
6. Top-level await 불가능하다.

//common.js

const {num} = require("./commonNum")

async function test(){
    const log =  await num();
    return console.log(log)
}

test();


//commonNum.js

function num (){

    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve("CommonJS모듈")
        },2000)
    })
}


module.exports = {num}

 

 

3.순환 의존성 테스트

// a.js or b.mjs

let foo = "hello";
let bar = { baz: "world"};

setTimeout(()=>{
    foo = "esm";
    bar = {baz: "module"};
}, 1000)

module.exports = {foo, bar} // common
export {foo, bar} // ESM


// index.js or index.mjs

const {foo, bar} = require("./a.js"); // common
import {foo, bar} from "./b.mjs" // ESM

console.log(foo);
console.log(bar);
setTimeout(()=>{
    console.log(foo);
    console.log(bar);
},1000)

 

같은 코드이지만 모듈에따라 값이 틀려진다. 이유는 위 글을 읽어보면 이해할수있다.