package.jsonにfilesを書かないあなたは、誰かを少しだけ不幸にしています

先に結論だけ

package.jsonfilesフィールドを指定すると、node_modulesに保存されるファイルサイズが減ります。

はじめに

この記事は、npmpackage.jsonに指定するフィールド、filesの指定方法と効用を解説、共有するためのものです。

想定する読者

この記事は、以下の読者を想定して書かれています。

  • JavaScriptの開発経験がある
  • npmを使ったことがある
  • npmやGitHubでnpmモジュールを公開している

想定する環境

この記事は、以下の環境を想定して書かれています。記事を読む前に、お手元の環境をご確認ください。

$ npm --version
7.15.1

filesフィールドとは

filesフィールドとは、package.jsonファイル内の設定フィールドです。このフィールドはnpmパッケージがインストールされたとき、どのファイルをnode_modulesにコピーするかを設定します。

たとえば、以下のようなnpmパッケージ用のリポジトリがあるとします。

example-project/
  ├ src/
  │  ├ srcA.js 
  │  └ srcB.js
  ├ lib/
  │  └ bundle.js
  ├ esm/
  │  └ module.js
  ├ __test__/
  │  ├ testA.spec.js 
  │  └ testB.spec.js
  ├ package.json
  ├ LICENSE
  ├ jest.config.js
  └ README.md

package.jsonには、以下のようにfilesフィールドが設定されています。

▼package.json

{
  "name": "example-project",
  "files": [
    "lib",
    "esm"
  ],
}

このnpmパッケージをインストールします。

npm install --save-dev example-project

すると、node_modulesには以下のようにファイルがインストールされます。

node_modules/
  └ example-project/
    ├ lib/
    │  └ bundle.js
    ├ esm/
    │  └ module.js
    ├ package.json
    ├ LICENSE
    └ README.md

filesフィールドに指定されていないファイルは、node_modulesにはインストールされません。

filesフィールドの挙動

filesフィールドの挙動を、公式ドキュメントから読み解いていきます。

ファイルの指定方法は?

filesフィールドにはstring配列を指定します。stringの中身は.gitignoreなどでおなじみのglobパターンを指定します。

省略するとどうなるか

filesフィールドは省略可能です。省略した場合["*"]として解釈されます。このパターンはすべてのファイルにマッチします。

.npmignoreと併用するとどうなるか

.npmignoreとfilesを併用した場合、ルートディレクトリとサブディレクトリで挙動が異なります。

  • ルートディレクトリの場合 : filesフィールドが優先されます。
  • サブディレクトリの場合 : .npmignoreが優先されます。

指定に関係なく無視されるファイルと、指定しても含まれるファイル

filesフィールドの設定にかかわらず、必ずパッケージに含まれるファイルと無視されるファイルがあります。詳しいリストは公式ドキュメントを参照してください。

無視されるファイル

.gitディレクトリやpackage-lock.jsonなど、インストール先に影響を与えないファイルは無視されます。

含まれるファイル

package.jsonLICENCEなど、インストール先に影響を与えたり尊重されるべきファイルはfilesフィールドの設定にかかわらずパッケージに含まれます。

filesフィールドの効用

filesフィールドを指定することで、インストール先のnode_modulesディレクトリのファイルサイズを減らせます。

たとえば以下のようなファイルはパッケージの動作に影響を与えません。filesフィールドを設定して除外するべきです。

  • 単体テストファイル
  • バンドル / トランスパイル前のソースファイル
  • バンドル / トランスパイルのための設定ファイル(webpack.config.jsやtsconfig.json)
  • APIドキュメント
  • サンプルコード

以上、ありがとうございました。