//------------------------------------- 
* CJS(CommonJS Module) 
확장명 : *.cjs 
package.json : "type": "commonjs", 
    - 기본값이므로 설정할 필요는 없다 
     - 내보내기 (module.exports) 
module.exports = cls1; 
     - 불러오기 (require) 
const cjs1 = require('./cjs1.cjs') 
//------------------------------------- 
* ESM(ES Module, ECMAScript module)  
확장명 : *.mjs 
package.json : "type": "module", 
     - 내보내기 (export) 
export { esm1 }; 
     - 불러오기 (import) 
import { esm1 } from './esm1.mjs'; 
//------------------------------------- 
< ESM에서 CJS 사용하는 방법 > 
https://stackoverflow.com/questions/70396400/how-to-use-es6-modules-in-commonjs
//------------------------------------- 
// cjs1.cjs - CJS 모듈 
class cls1 { 
    static add1(a) {        return `cjs-add1 = ${a + 1}`;    } 
} 
module.exports = cls1; 
//------------------------------------- 
// loadEsm.mjs - esm에서 cjs 모듈 사용 
     - require 함수 생성 
import { createRequire } from 'module'; 
const require = createRequire(import.meta.url); 
const cjs1 = require('./cjs1.cjs') 
console.log(cjs1.add1(12)); 
//----------------------------------------------------------------------------- 
< CJS에서 ESM 사용하는 방법 > 
https://stackoverflow.com/questions/70396400/how-to-use-es6-modules-in-commonjs
     - 사용할때 마다 import해서 사용해야 한다. 
import('lodash-es').then(_ => { 
    console.log(_.pad(_.toUpper('hello world'), 17, '*')); 
}); 
//------------------------------------- 
// esm1.mjs - ESM 모듈 
class esm1 { 
    static add1(a) {        return `esm-add1 = ${a + 1}`;    } 
} 
export { esm1 }; 
//------------------------------------- 
// loadCjs.cjs - cjs에서 mjs 모듈 사용 
     - Promise 사용 
import('./esm1.mjs').then(esm => { 
    console.log(esm.esm1.add1(11)); 
}); 
import('./esm1.mjs').then(({ esm1: esm1 }) => { 
    console.log(esm1.add1(1)); 
}); 
     - 비동기 함수(async) 안에서 사용 (await) 
(async () => { 
    const { esm1 } = await import('./esm1.mjs'); 
    console.log(esm1.add1(1)); 
})(); 
//------------------------------------- 
[번역] 왜 CommonJS와 ES Modules는 함께 쓸 수 없는가 | 내 라이브러리에서 esm과 cjs를 동시에 지원하는 법 
https://roseline.oopy.io/dev/translation-why-cjs-and-esm-cannot-get-along
CommonJs와 ECMAScript Modules(ESM) 2022-12-07 
https://velog.io/@runprogrmm/CommonJs%EC%99%80-ECMAScript-ModulesESM
내 서비스를 ESM으로 옮기는 방법 
'Code > JavaScript' 카테고리의 다른 글
| JS, CSS 파일 압축 유틸 (0) | 2024.02.21 | 
|---|---|
| [JS] 비동기 함수(모드)에서 루프를 동기로 동작시키기 (0) | 2023.10.09 | 
| [JS] Express.js 사용법 (0) | 2023.08.13 | 
| node.js 모듈 사용하기 (0) | 2023.08.12 | 
| [자바스크립트] 이미지 뷰어 라이브러리 (0) | 2022.12.06 | 










