📝

npm パッケージが ESM パッケージかどうか調べるウェブサイト

2022/02/28に公開

npm パッケージが ESM パッケージかどうか調べるやつを作った。

目的

バンドラーを使ってウェブフロントエンドの開発をしているときはパッケージのモジュールシステムの差はバンドラーによって吸収されることが多いのであんまり気にならない。しかし、ライブラリを作る側だと気になることがある。

具体的には Prettier の開発では結構気にする必要がある。(なんで気にする必要があるのか〜みたいな話はまた別に記事を書くつもりだ。)

そんなわけで Prettier を開発するときには依存しているライブラリが ESM パッケージかどうかを簡単に調べる方法があると役に立つときがある。今までだとそのライブラリのソースやチェンジログを読んだり実際に試したりして試していたが、ブラウザでシュッと確認したい。

is-esm-package というウェブサイトを作った。

フォームにパッケージの名前を入力して submit ボタンを押すとその名前のパッケージが ESM パッケージかどうかを判定してくれる。

unpkg にホストされてる package.json を fetch で読んで、type フィールドを見るだけの簡単設計。type が module であれば ESM パッケージとみなす。

基本的には type フィールドを見るが、exports フィールドがあればその内容を画面に出してくれる。

Vite と preact と React Query と Tailwind CSS を使った。

最近仕事で Vite を使う機会があってかなり印象が良かったので使った。やはりいい感じ。

実は初めて Tailwind CSS を使ったのだが、噂どおり体験はかなり良かった。とはいえ、クラスを文字列で書くのは型が効かないしそのへんは微妙？もしかしたらいい感じの解決策があるのかもしれないけど。次からも、自分用の小さいツールを書くときは Tailwind CSS を使うと思う。

厳密にやるならもっといろんな情報から判断した方がいいのかもしれないけど自分の用途では十分なものができてよかった。