👌

JSのライブラリ開発でnpm linkを使って公開前のライブラリをテストする

2022/08/05に公開約1,400字

はじめに

今回初めてnpmパッケージを公開しました

https://github.com/mikinovation/storybook-addon-vuetify3

今Githubにissueがあがっており、開発中のものを修正してテストしているのですが今まではnpmにベータ版を公開して、exampleのプロジェクトにインストールしてからテストするという非常に効率の悪い方法でテストしていました

一度公開してからテストというのはあまりにも面倒なのでどうにか解決する方法を探していたところ以下のような記事を見つけたので備忘録として残しておきます

https://ngtblog.lichtwork.com/2020/11/07/npmライブラリ開発時の公開前のテスト方法/

npm linkを使ってテストする

今回はnpm-linkを使って開発中で未公開のライブラリをローカル環境にてテストします

https://docs.npmjs.com/cli/v8/commands/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に公開してテストをするのが面倒という方はぜひこの方法をお試しください

GitHubで編集を提案

Discussion

ログインするとコメントできます