JSのライブラリ開発でnpm linkを使って公開前のライブラリをテストする
はじめに
今回初めてnpmパッケージを公開しました
今Githubにissueがあがっており、開発中のものを修正してテストしているのですが今まではnpmにベータ版を公開して、exampleのプロジェクトにインストールしてからテストするという非常に効率の悪い方法でテストしていました
一度公開してからテストというのはあまりにも面倒なのでどうにか解決する方法を探していたところ以下のような記事を見つけたので備忘録として残しておきます
npm linkを使ってテストする
今回はnpm-linkを使って開発中で未公開のライブラリをローカル環境にてテストします
まずnpm linkとは
This is handy for installing your own stuff, so that you can work on it and test iteratively without having to continually rebuild.
ローカルにあるpackageをinstallするのに便利で、継続的に再構築することなく作業やテストを繰り返し行うことができる機能になります
npm linkの使い方
それでは具体的な使い方です
まずはルートディレクトリにてnpm linkを実行してみます
~/projects/storybook-addon-vuetify3$ npm link
続いてexampleで作ったディレクトリに移動して、npm link <package>を実行してみます
~/projects/storybook-addon-vuetify3$ cd example/vite-vue3
~/projects/storybook-addon-vuetify3/example/vite-vue3$ npm link storybook-addon-vuetify3
これでexampleで作ったディレクトリにローカルのstorybook-addon-vuetify3がインストールされます
これだけで準備は完了です。exampleのプロジェクトでstorybook-addon-vuetify3を簡単にテストすることができるようになりました
あとはUnit Testなり、Cypressなりで自動テストを回せるようになれば更に開発体験が向上しますね
まとめ
今回はnpm linkを使って開発中で未公開のライブラリをテストする方法を紹介しました
いちいちnpmに公開してテストをするのが面倒という方はぜひこの方法をお試しください
Discussion