JS에서 사용하는 export pattern이다.
import 문을 단순화할 수 있다.
바로 예시를 확인해 보자. 예시를 보면 한 번에 이해할 수 있다.
일반적인 구조
📂 sample
📄 foo.ts
📄 bar.ts
📄 test.ts
위와 같은 폴더구조가 있다고 가정한다.
// sample/foo.ts
export const foo = 'foo';
export const foo2 = 'foo2';// sample/bar.ts
export const bar = 'bar';// test.ts
import {foo, foo2} from "./sample/foo";
import {bar} from "./sample/bar";
const test = () => {
console.log(foo);
console.log(foo2);
console.log(bar);
}각 폴더는 위와 같이 작성되어 있다.
test에서 import 하니 두 파일을 각각 import 해서 두 줄의 import 문을 사용한 것을 볼 수 있다.
barrel export를 사용하면 이 import 문을 한 줄로 줄일 수 있고, ./sample/foo 처럼 파일 명까지 모두 적어야 했던 것을./sample 로 줄일 수 있다.
barrel export 사용
📂 sample
📄 foo.ts
📄 bar.ts
📄 index.ts
📄 test.ts
// sample/foo.ts
export const foo = 'foo';
export const foo2 = 'foo2';// sample/bar.ts
export const bar = 'bar';// sample/index.ts
export * from './foo';
export * from './bar';barrel export pattern을 위해 추가한 index 파일
/* test.ts
before
import {foo, foo2} from "./sample/foo";
import {bar} from "./sample/bar";
*/
import {bar, foo, foo2} from "./sample";
const test = () => {
console.log(foo);
console.log(foo2);
console.log(bar);
}import 가 한 줄로 바뀌고, 뒤에 from 도 짧아졌다.
언제 유용한가?
- 한 폴더 안에 많은 파일들이 있을 때 import 해야 할 것이 많을 경우
- 프로젝트 규모가 커져서 폴더 depths 가 커지는 경우
장점
- import 문을 깔끔하게 정리할 수 있다.
- 라이브러리처럼 공식 진입점을 제공해 주는 효과가 있다.
단점
- 경로마다 index 파일을 만들어 관리해야 하는 불편함이 있다. -> 불편하면 누군가는 자동화를 시도했다. https://www.npmjs.com/package/barrelsby index 파일 생성 라이브러리가 있다. vsCode extension 에도 있다고 한다~ https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-typescript-exportallmodules
- 트리 쉐이킹 할 때 export를 *(wildcard) 로 할 경우 실제로 사용하지 않는 모듈까지 남아있게 되어 번들에 포함될 수 있다.
활용, 스스로 고민해본 것
꼭 모든 폴더에 barrel export 를 사용하지 않고 필요하다고 생각되는 곳에만 선택적으로 사용해도 된다.
예를 들어, 컴포넌트 기반 프로젝트에서 버튼 종류가 여러 개가 있을 때, 이를 파일별로 만들면 아래와 같을 것이다.
ClickButton.ts MouseButton.ts ScrollButton.ts ....
이 모든 버튼을 import 해서 쓴다면, import 줄 수만 해도 꽤나 차지할 것이다. 이럴 때 유용하게 쓸 수 있을 것 같다.
index.ts 를 폴더별로 중첩해서 최상위 경로만 from 에서 입력해서 쓰게할 수도 있다.