npm publishせずにパッケージに同梱されるファイルを《ツリー形式で》確認する方法 #JavaScript

npm publishせずに、.npmignoreや、.gitignore、そしてpackage.jsonのfilesフィールドの設定がどのように作用しているかを確認する方法として、以前『npm publishせずにパッケージに同梱されるファイルを確認する方法 - Qiita』という記事を投稿しました。

この記事ではnpm pack --dry-runで確認する方法を紹介しましたが、表示されるファイルの順序がばらばらで、ファイル構造が複雑になると読みにくい出力になっていました。

読みやすさを考えると、treeコマンドのようなツリー形式で見たいものです。

ツリー形式で表示するワンライナー

そこで、いい感じにツリー形式でパッケージの中身を一覧するワンライナーを考えました:

PACKAGE=$(npm pack 2> /dev/null) sh -c 'set -eu && tar tf $PACKAGE | tree --fromfile && rm $PACKAGE'

実行例:

.
└── package
    ├── CHANGELOG.md
    ├── LICENSE
    ├── index.d.ts
    ├── index.d.ts.map
    ├── index.js
    ├── index.ts
    └── package.json

1 directory, 7 files

package.jsonにスクリプトとして追加しておくと便利

package.json

{
  "scripts": {
    "pack:preview": "PACKAGE=$(npm pack 2> /dev/null) bash -c 'set -eu && tar tf $PACKAGE | tree --fromfile && rm $PACKAGE'",
  },
}

yarn pack:preview
# or
npm run pack:preview