みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

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

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 でビルドすると、
パスが解決された状態で出力されます。

おしまい