[ES modules] Re-exporting

commonJS에서...

다음은 commonJS 모듈을 사용하는 라이브러리의 index.js 에서 자주 쓰이는 패턴입니다.

// index.js
module.exports = {
  AppBar: require('./components/AppBar/AppBar'),
  AppCanvas: require('./components/AppCanvas/AppCanvas'),
}

ES modules에서...

위 패턴을 ES module에선 어떻게 구현할 수 있을까요?

1. import, export

단순한 방법입니다.

// index.js
import AppBar from './components/AppBar/AppBar'
import AppCanvas from './components/AppCanvas/AppCanvas'

export {AppBar, AppCanvas}

2. export ... from ... 문법

다행히도 더 간편한 단축문법이 존재하네요.

export {AppBar} from './components/AppBar/AppBar'
export {AppCanvas} from './components/AppCanvas/AppCanvas'

default를 re-exporting 할 수도 있고요,

export {default as AppBar} from './components/AppBar/AppBar'

모듈의 전체를 re-exporting 할 수도 있네요!

export * from './components/AppBar/AppBar'

다만, 전체를 다시 내보내는 경우, default는 제외되어 내보내지므로 default 내보내기를 추가로 작성해주어야 합니다..

참고 문서

• https://ko.javascript.info/import-export#ref-622
• https://jamesknelson.com/re-exporting-es6-modules/