はのフロントエンド入門 #2 package.json 編
はのフロントエンドに入門記事第二弾は package.json 編です。第一回は npm 編でした。
npm のことを知る上で package.json の話は避けられません。ていうかむしろこっちが本体…
全部は網羅しきれないので、ざっくりよく使うところだけ確認しておきたい気持ち。
参考文献
何はともあれ npm 本家のドキュメントを読みましょう。
05 - Working with package.json | npm Documentation
package.json | npm Documentation
package.json ってなによ
The best way to manage locally installed npm packages is to create a package.json file.
ローカル（プロジェクト）にインストールされた npm パッケージを管理する最良の方法は、 package.json を作成してそこで管理すること、です。
npm install hogehoge などでプロジェクトに追加された npm パッケージは、プロジェクトのルートディレクトリにある pacage.json というファイルの中に、
「このプロジェクトが依存しているパッケージの一覧」として記録されていきます。
package.json は以下のような事柄を記録、管理します。
name: プロジェクト名。必須。version: バージョン。必須。description: プロジェクトの概要、説明文。dependencies: プロジェクトにインストールした（≒依存している）パッケージの一覧。devDependenciesなど環境が頭に付くものもある。scripts: プロジェクトで使われる各種コマンドの集合。
などなど。他にも色々記述出来ますが、これらの情報を JSON 形式で記述してまとめたものが package.json です。
中でも重要なのは scripts と dependencies なので、これらについてまとめることにします。
dependencies
package.json | npm Documentation
詳細なドキュメントは上のリンクからどうぞ。
重要だけどそんなに難しいことはなく、単純に「プロジェクトが依存するパッケージの一覧」です。
パッケージの追加は、前回の記事で紹介したような npm install ... で入れる方法がありますが、
package.json の dependencies にインストールしたいパッケージを手書きし、後から npm install しても入れることができます。
パッケージ名指定なしの npm install は、 package.json の dependencies を見て、必要なパッケージをまとめてインストールしてくれます。
これで依存関係にあるパッケージをまとめて整えることができます。パッケージマネージャですね。
npm install --save-dev などがあったのと同じく、 package.json 内でも devDependencies などの開発環境用パッケージの一覧をまとめたセクションが別に存在します。
scripts
package.json | npm Documentation
テスト、ビルド、その他様々なコマンドを記述するためのセクションです。
割と何でも書ける…と思っていたのですが、どうも本来の使い方は
The key is the lifecycle event, and the value is the command to run at that point.
で、 npm の各種イベントにフックして何らかのコマンド、スクリプトを実行させたい時に使うのが正しい…？っぽいです。知らなかった。
本来の使い方的には、
に列挙されているようなイベント名をキーとして、その時に実行したいコマンドを書く、という感じ。
違う使い方
違う使い方というか、むしろこっちの使い方をメインでやっていたのですが…
scripts 以下には任意のキー、任意のコマンドを記述できます。（上述した一覧のイベント名と被ると困りますが）
npm でプロジェクト…パッケージのローカルにインストールした各種ツールは、そのままだと直接実行する術がありません。
あるかもしれませんが私が調べた限りでは見つからず。
なので、例えばローカルに jest とか入れると、そのままではコマンドラインからそれを使えず、困ったことになります。
※ 2018/01/08 追記
直接実行する方法自体はいくつか存在しているというコメントをもらいました。ありがとうございます。
上記記事内の当該部分にリンクを貼っていますが、 npm bin ... で対象パッケージのパスを持ってこれるので、それを使えばローカルパッケージを叩ける。というのが基本らしいです。
が、上記記事で紹介されている npx というものが 5.2.0 から追加されたらしいので、それを使えば良さそうです。
この scripts 以下に定義されたコマンドはローカルにインストールされた npm の各種パッケージをちゃんと見てくれるようで、
ローカルインストールしたコマンドラインツールを使う場合にこの scripts 以下にコマンドを記述してから使う、という感じになります。
…ほんとにこうしなきゃいけないんですかね？あんまり自信はないですが…
