Barrel
バレル(Barrel)とは、複数のモジュールから1つの便利なモジュールにエクスポートをロールアップする方法です。バレル自体は、他のモジュールの選択されたエクスポートを再エクスポートするモジュールファイルです。
ライブラリ内の次のクラス構造を想像してみてください:
1
// demo/foo.ts
2
export class Foo {}
3
4
// demo/bar.ts
5
export class Bar {}
6
7
// demo/baz.ts
8
export class Baz {}
Copied!
バレルがなければ、ユーザーは3つのインポート文を必要とするでしょう:
1
import { Foo } from '../demo/foo';
2
import { Bar } from '../demo/bar';
3
import { Baz } from '../demo/baz';
Copied!
代わりに、以下を含むdemo/index.tsバレルを追加することができます:
1
// demo/index.ts
2
export * from './foo'; // re-export all of its exports
3
export * from './bar'; // re-export all of its exports
4
export * from './baz'; // re-export all of its exports
Copied!
今、ユーザーは必要なものをバレルからインポートできます:
1
import { Foo, Bar, Baz } from '../demo'; // demo/index.ts is implied
Copied!

名前付きエクスポート

*をエクスポートする代わりに、モジュールを名前でエクスポートすることができます。たとえば、baz.tsに次のような機能があるとします。
1
// demo/foo.ts
2
export class Foo {}
3
4
// demo/bar.ts
5
export class Bar {}
6
7
// demo/baz.ts
8
export function getBaz() {}
9
export function setBaz() {}
Copied!
getBaz/setBazをdemoからエクスポートしたくない場合、代わりに別名でそれらをインポートし、その別名でエクスポートすることで変数に入れることができます:
1
// demo/index.ts
2
export * from './foo'; // re-export all of its exports
3
export * from './bar'; // re-export all of its exports
4
5
import * as baz from './baz'; // import as a name
6
export { baz }; // export the name
Copied!
そして今、ユーザーは次のようになります:
1
import { Foo, Bar, baz } from '../demo'; // demo/index.ts is implied
2
3
// usage
4
baz.getBaz();
5
baz.setBaz();
6
// etc. ...
Copied!
最終更新 3yr ago
リンクのコピー