created: 2023-11-15T02:10:26.984Z

TypeScript で実装されているパッケージを npm link する

npm link は簡単でよいが、いちおう準備しないと動作しない。ときどきやると戸惑うのでメモしておく。

npm link の導入については以前に書いていた。

用語

ややこしいので先に呼び方をはっきりさせておく

  • 使ってもらうコードは「パッケージ側」
  • 使う側のコードは「アプリ側」

出力先のパスを main/exports などに設定する

パッケージ側で tsconfig.json#outDir に設定をしておく

"outDir": "./dist"

型定義を出力しておく

パッケージ側で *.d.ts ファイルを出力しておかないと、ちゃんと型がみつからないエラーがでる。

Cannot find module ... type declarations.ts(2307)

tsc はオプションをつけないと型定義を出力してくれないのでつけて実行。

$ npx tsc --declaration

package.json#main を用意すること

パッケージ側で main フィールドを用意して、そこで利用する実装を export しておく。

export * from "./constant-util";
export * from "./type-util";
...

エディタ側の対応など、なんかでハマるとイヤなので exports はまだ使ったことがない。 exports が登場してもう何年もたつので、そろそろ枯れてきてそうだなとは思う。

縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS&テクニック (WEB+DB PRESS plus)
[ad] 縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS&テクニック (WEB+DB PRESS plus)
池田 拓司 (単行本(ソフトカバー))