[TypeScript] Barrel의 장점과 단점

📍Barrel

여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일

 

예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때

// src/lib/foo.ts
export class Foo {}

// src/lib/bar.ts
export class Bar {}

// src/lib/baz.ts
export class Baz {}

 

barrel이 없으면 3개 라인의 import가 필요함

// src/pages/page.ts
import { Foo } from '../lib/foo';
import { Bar } from '../lib/bar';
import { Baz } from '../lib/baz';

 

barrel 파일(lib/index.ts) 을 추가하여 import + export를 해주면

// src/lib/index.ts
export * from './foo'; // re-export all of its exports
export * from './bar'; // re-export all of its exports
export * from './baz'; // re-export all of its exports

 

consumer 위치에서는 각 모듈 대신 barrel에서 import하여 import를 간소화할 수 있다

// src/pages/page.ts
import { Foo, Bar, Baz } from '../lib';

 

📍Named exports

export * ~ 대신, 특정 이름으로 export할 수도 있다

 

아래처럼 baz.ts 가 함수를 가지고 있다고 할 때

// src/lib/foo.ts
export class Foo {}

// src/lib/bar.ts
export class Bar {}

// src/lib/baz.ts
export function getBaz() {}
export function setBaz() {}

 

export * from './baz'; 했으면 아래처럼 import 했을 테지만

// src/pages/page.ts
import { Foo } from '../lib/foo';
import { Bar } from '../lib/bar';
import { getBaz, setBaz } from '../lib/baz';

 

barrel 에서 as 키워드로 name을 지정해주면

// src/lib/index.ts
export * from './foo'; // re-export all of its exports
export * from './bar'; // re-export all of its exports

import * as baz from './baz'; // import as a name baz
export { baz }; // export the name

 

counsumer 위치에서 아래처럼 활용할 수 있다

// src/pages/page.ts
import { Foo, Bar, baz } from '../lib'; // src/lib/index.ts is implied

// usage
baz.getBaz();
baz.setBaz();
// etc. ...

 

⭐️참고로 TypeScript 말고 JavaScript 에서도 잘 작동한다

 

📍단점

대규모 프로젝트에서는 성능 저하를 초래할 수 있다. 그래서 일반적으로는 사용이 권장되지 않는다

 

참고

https://basarat.gitbook.io/typescript/main-1/barrel

Barrel - TypeScript Deep Dive

 

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/

Speeding up the JavaScript ecosystem - The barrel file debacle