編集

npmx alpha公開、npmレジストリ向けブラウザでパッケージの評価情報を一元表示

#npmx #npm #Storybook #e18e

npmx.devのalphaが公開。npmレジストリ上のパッケージ/ユーザー/組織を検索し、READMEに加えてコードまで辿れる。公式が列挙する表示項目と周辺機能を一画面に寄せ、パッケージREADMEからStackBlitzやCodeSandboxなどのデモ環境を起動可能。UIは19言語、ライト/ダーク、キーボード操作を意識した設計。

#主な機能・特徴

  • ダウンロード統計、古い依存への警告、module format（ESM/CJS）、install sizeの表示
  • JSRとの横断参照、複数プロバイダのリポジトリ対応、バージョン範囲の解釈表示
  • e18e連携のパフォーマンス推奨、パッケージのいいねなどソーシャル機能

Storybook/Chromatic側は、npmxのパッケージ画面サイドバーにデプロイ済みStorybookへのリンクを出す取り組みを進めている。ライブラリ作者はpackage.jsonにstorybookフィールドで公開URLを渡す既存の流儀に乗ればよく、npmx本体のNuxt向けStorybook導入にもコアチームがPRで関与したと説明。Chromaticはnpmxに対し、PRごとのビジュアル回帰とアクセシビリティのスナップショット検査を無償提供するスポンサーシップを表明。

json
{
  "storybook": {
    "url": "https://your-storybook-url.com"
  }
}

VoidZeroは、npmxがNuxt経由でViteをビルドに使い、Vitest、Vite 8 beta経由のRolldown、oxlint、oxfmt、統合プレビューのVite+を組み合わせていると整理。Vite+のlint/fmtが意図せずpostinstallを走らせて遅くなる問題をnpmx側が再現付きで報告し、オーバーヘッドが約3.23倍から約1.10倍に下がったというフィードバック例も公開。プロジェクト支援のスポンサーに名乗る。

e18eは、ESLintプラグインやCLI、GitHub Actionで配っているベストプラクティスを、npmのフロントであるnpmx上で発見時点に表示しやすくする協業として位置づけ。現時点では、モダン環境では冗長なパッケージへの注意や、直近バージョンでのサイズ・依存の増加、依存グラフ上の置き換え候補などを警告として出す方向の説明にとどまり、今後は最小Nodeバージョンやブラウザサポートに応じた助言などを足す構想を示す。

#参考文献

編集