💏

開発中のnpmライブラリをローカルプロジェクトで使おう

に公開
Node.js
TypeScript
npm
tech

ローカルリポジトリにある開発中のライブラリを別のローカルのプロジェクトで使うならnpm linkが便利という話。

https://docs.npmjs.com/cli/v8/commands/npm-link

例

たとえばmy-libraryという名前のライブラリをmy-libraryリポジトリで開発しているとする。

package.json
{
  "name": "my-library",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "dev": "tsc -w",
    "build": "tsc"
  },
  "license": "MIT",
  "devDependencies": {
    "typescript": "^5.1.6",
  }
}
  1. このライブラリリポジトリ内のルートでnpm linkコマンドを打つ
  2. 他のプロジェクトのルートでnpm link my-libraryコマンドを打つ
  3. npm installをしなくとも次のようにライブラリをimportできる
main.ts
import * as MyLibrary from 'my-library';

これで、開発途中のライブラリに変更を加えながらメインのプロジェクトを進めることができる。

注意点

ライブラリを変更している際に、importしたライブラリの型が認識されないことがある。
npm link LIBRARYコマンドを実行すると、node_modules内にLIBRARYという名前のシンボリックリンクが張られる。ちなみにシンボリックリンクとは、他のリソースへの参照リンクである。リンクの参照先はnpm linkを実行したローカルのリポジトリだ。

このような場合は、tsconfigのcompilerOptions.preserveSymlinksをtrueに設定するとよい。

https://www.typescriptlang.org/ja/tsconfig#preserveSymlinks

シンボリックリンクを実体パスへ解決しないという Node.js の同名フラグを反映したオプションです。

ライブラリのビルドを行うとシンボリック関連で問題が発生することがある。preserveSymlinksフラグがオンになっていると、TypeScriptはsymlinkのリンク先を見ないようにしてくれる。

おわり

どんどんライブラリを作って楽をしていこう。

併せて読みたい: TypeScriptでpathのエイリアスを使用するとライブラリ公開時に型情報が失われることがある

Discussion