search
LoginSignup
28

More than 1 year has passed since last update.

posted at

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ドキュメント
  • サンプルコード

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
28