概要
- JavaScriptでの開発において、npmを利用して得た知見や心得等のまとめ。
- 今回は、packageやscriptsに絞って記載。
package
package.json内の情報はできるだけ記述する
- こちらのメタ情報によって、Documentにもなりえる他、特定環境指定等、より多くの機能を与えることができるため。
- 例として下記のように指定することで、環境を制限して開発環境を統一することができる。
{
"engines": {
"node": ">=10",
"npm": "~5.0.0"
}
}
package.json内へのコメントは、フィールドを利用する
- JSON形式でありコメントの対応が無いため、記述する場合は下記のようにフィールドを利用する形で情報を与える。
-
commentと記述しておくことで、検索が容易。
-
"comment": "...."
ロックファイルは常にリポジトリにコミットする
-
package-lock.jsonやyarn.lock等のロックファイルは、リポジトリにコミットする必要がある。 - 理由として、全開発者間で同一のバージョンと依存関係を維持するため。
本番環境へはnpm ciで行う
- 本番へのデプロイの際には、
npm ciコマンドでインストールを行う。 - 理由として、lockファイルに適した依存関係のクリーンインストールを行い、正確なバージョンを利用する必要があるため。
依存関係を適切かつ最新のものに保つ
- 脆弱性を防ぎ安全に保つため、常に依存関係を確認する。
- 下記のような手動・自動ツールを利用して、早期に調整する。
- npm-check-updates : 依存関係の確認・更新ツール
- npm-audit: 依存関係の自動修正コマンド。npm v6以上に内包。
- Dependabot : 脆弱性チェックの自動化ツール。無料。Github社。
- Snyk : 脆弱性チェックの自動化ツール。有料。
scripts
クロスプラットフォームを意識する
- 自身の環境だけではなく、「Windows,Linux,MacOS」で利用できるスクリプトを作成する。
- scripts内での
rm等のUNIXコマンド利用は、Windowsでは対応が難しいため。
- scripts内での
- UNIXコマンドを利用したスクリプトを作成する場合、下記のようなパッケージを利用する。
- 下記、記述例
"scripts": {
"remove": "rimraf ./dist",
"copy": "cpx -C public/** dist"
},
複数コマンド実行は可能なものは並列で実行する
- 複数コマンド実行の場合、可能なものは並列で実行して、終了速度を上げる。
- 並列実行は、下記のようなパッケージを利用することで容易に可能。
- concurrently : 複数コマンド実行CLIツール
- npm-run-all : 複数コマンド実行CLIツール
同一コマンドで用途が違う場合、コロンで分ける
- ビルドや監視等、環境やファイルごとにコマンドを使い分ける場合は、下記のようにコロンをつけて分割してまとめる。
- ※下記の
run-sコマンドは上記記載のnpm-run-allのショートカット
- ※下記の
{
"scripts": {
"build" : "run-s build:sass build:ts",
"build:sass": "sass input.scss output.css",
"build:ts" : "tsc main.ts",
"watch" : "run-s watch:sass watch ts",
"watch:sass": "sass --watch input.scss output.css",
"watch:ts" : "tsc -w main.ts"
}
}
- 補足として、上記の
buildやwatchコマンドは下記のように簡略化できる。- 個人的にはアスタリスクよりも波括弧の方が、明示的かつ柔軟。
{
"scripts": {
"build" : "run-s build:*",
...
"watch" : "run-s watch:{sass,ts}",
...
}
}