코드루덴스

//-------------------------------------
* 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으로 옮기는 방법