TypeScriptでコンパイル後のimport文を相対パスにしたい

Question

TypeScript初めて1ヶ月位のものです。

したいこと

React + TypeScriptで開発をしているのですが、tsxで管理されているsrcディレクトリ内では、開発のしやすさのため、絶対パスでimport文を書いています。

これらをコンパイルするとsrcと並列関係にあるbuildディレクトリの中に、build/dist/srcとしてjsxにコンパイルされます。

このbuild/dist/src内のファイルを見てみると、ここでもimport文は絶対パスになっているのですが、この部分を相対パスにしたいと思っています。

理由は、storybookなど、外部モジュールを使うときにうまく読み込めないなどの問題が生じているからです。

tsconfig.json(の一部)

	"compilerOptions": {
		"outDir": "build/dist",
		"target": "es5",
		"lib": ["es6", "dom"],
		"sourceMap": true,
		"allowJs": true,
		"jsx": "react",
		"moduleResolution": "node",
		"rootDir": "src",
		"baseUrl": ".",
...

自分で調べてみたこと

• tsconfigのrootDir,baseUrlなどについて調べる(よくわからなかった)
• [typescript compile relative path]などで検索をかける

tsのコンパイルオプションの理解が浅いことと、良いキーワードが思い当たらなかったなどでうまく答えにたどり着くことができませんでした。

個人的な予想としては、tsconfigのどこかの設定をいじることで、実現できるのかなと考えているのですが、答えを見つけられません。

どなたかご存知の方がいらっしゃればご教示願えませんでしょうか。
よろしくおねがいします。

Answer 1

絶対パス・・・というと下記のように paths オプションでエイリアス設定しているということでしょうか？

"paths": {
  "@/*": [
    "src/*"
  ]
}

この場合はオプションのみでは相対パスに変換できません。
@zerollup/ts-transform-paths ＋ cevek/ttypescript でコンパイルしたり、Babel でトランスパイルしたり何らかのツールを使う必要が出てきます。

[関連 issue]
tsconfig paths break when consuming the compiled declaration files from a different package · Issue #18972 · Microsoft/TypeScript

Comments

[退会済みユーザー]

回答ありがとうございます。
質問文にもあるように、絶対パスの指定はtsconfigのrootDirとbaseUrlによって指定されています。
ですので、pathsという項目は今は使っていません。

[yhg]

baseURL 基準で
import foo from 'src/foo';
のように書いているならばオプションで対応は無理だと思います。
import foo from '/Users/you/project/src/foo';
とかも同様です。

paths オプションを使って
import foo from '@/foo';
のようにして ttypescript + ts-transform-paths が手っ取り早いのではないんじゃないかなーと思います。