RIT Tech Blog

株式会社RITのエンジニアが知見を共有する技術ブログです。

JS/TSで特定ディレクトリ以下のモジュールをまとめてexport/importしたい

CTOの福田です

JSって書いてますがTSの話しかしませんごめんなさい

app.ts
├ modules
│  ├ a.ts
│  └ b.ts
└ ...

こんな感じのファイル構成があったときに、app.tsでmodules/aとmodules/bを使おうとすると

// modules/a.ts
export default class A {
}

// modules/b.ts
export default class B {
}


// app.ts
import A from './modules/a';
import B from './modules/b';

class App {
}

AとBを別々にimportする必要がある 2つぐらいだと問題ないけど増えてくると面倒

// app.ts
import { A, B } from './modules';

って書けると嬉しい

とりあえず一つのファイルでimportしてそこからexportしてみる

// modules/modules.ts
import A from './a';
import B from './b';

export { A, B };

// app.ts
import { A, B } from './modules/modules';

これだとmodules/modulesがダサい

index.(js|ts)ってファイルを置いておくと、親ディレクトリがimportされたときにそのファイルがimportされる(なんの仕様かはちゃんと調べてない)

// modules/index.ts
import A from './a';
import B from './b';

export { A, B };

// app.ts
import { A, B } from './modules';

index.tsでimportするモジュールをいちいち書かなきゃいけないのが面倒

// modules/a.ts
export class A {
}

// modules/b.ts
export class B {
}

// modules/index.ts
export * from './a';
export * from './b';

export * from 'xxx'でそのモジュールでexportしてるモジュールを全てexportできる ただ、default exportしてると動いてくれないのでexportにしてる

僕がやれたのはここまでなので、誰かJSとかTSのすごい人がいたら

import { A, B } from './modules';

import A from './modules/a';

ができてindex.tsを書くのが面倒じゃない良い方法あれば教えてください!