CJS와 ESM의 export, import

codeing999·2023년 8월 25일
1

JavaScript

목록 보기
24/24

Named Exports (명명된 내보내기)

여러 항목을 이름을 붙여서 내보내는 방식. 그러나 실제로는 하나만 내보낼 때도 굳이 디폴트 내보내기는 안 쓰고 이것만 쓰는 것을 권장.

ESM

export

//MyService.js
class MyService1 {
}
class MyService2 {
}

export { MyService1, MyService2 };

//또는

export class MyService1 {
}
export class MyService2 {
}

import

//otherFile.js
import { MyService1, MyService2 } from "./MyService";

CJS

첫번째 방법

export

//MyService.js
class MyService1 {
}
class MyService2 {
}

module.exports = {
MyService1,
MyService2
}

// 또는 
exports.class MyService1 {
}
exports.class MyService2 {
}

import

//otherFile.js
const {MyService1, MyService2} = require("./MyService");

두번째 방법 - 단일일 때만

export

//MyService.js

class MyService {
  constructor() {
    // ...
  }
}

module.exports = MyService;

import

const MyService = require('./MyService');

const myInstance = new MyClass();

Default Export (디폴트 내보내기)

모듈에서 하나만 내보내기할 때 사용하는 방식으로, 임포트할 때 이름을 지정하지 않고 가져올 수 있다.
가독성도 안좋고 타입스크립트에서 디폴트 익스포트 사용 시 다른 export가 다 사라지는 이슈가 있어서 디폴트 내보내기는 사용하지 않으려고 함

ES6

//MyService.js
export default class MyService {
}
//otherFile.js
import MyService from './MyService';

CJS

//MyService.js
exports.default = class MyService {
}
//OtherFile.js
const MyService = require('./MyService');

const myInstance = new MyService.default();
profile
코딩 공부 ing..

0개의 댓글