なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ

書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

2020/03/29

TypeScript で paths を解決してビルドする

カテゴリー:TypeScript

TypeScript の tsconfig.jsonpaths という機能があります。
簡単に言うと、以下のようなことが出来る機能です。

src/components/FooBar/SubFooBar/index.tsx

// paths を使わない
import SomeModule from "../../Baz";

// paths を使う
import SomeModule from "@/components/Baz"

ただし、この機能を使うと、tsc でトランスパイル後のファイルにも
@/components/Baz のまま出力されてしまい、
ライブラリとして配布する際、パス解決が出来なくなってしまいます。

ということで、これを解決する方法。
やり方は簡単で、 tsc の代わりに ttsc を使い、プラグインを入れます。

$ yarn add ttypescript @zerollup/ts-transform-paths --dev

そして tsconfig.json を編集します。

{
  "compilerOptions": {
    "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]
  }
}

あとは、 tsc の代わりに ttsc でビルドすると、
パスが解決された状態で出力されます。

おしまい