//-------------------------------------
* 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 |