package.json

Programing tips package.json.

package.json blame

private

このプロパティがtrueになっていると、モジュールの公開ができない。公開しないプロジェクトは誤って公開しないようにtrueにしておく。

scripts

任意のshell scriptを実行するエイリアスコマンドを定義できる箇所です。

Connect-CMSでは、Laravelと変わらずLaravel-mixのエイリアスコマンドが定義されています。

jsとcssのフロント開発はコンパイルやminify化も含めて色々なソフトがありますが、LaravelではLaravel-mixという何かのラッパーライブラリが存在しています。この何かが実はwebpackなのですが、これとLaravelの橋渡しをしているのがLaravel-mixです。そしてコンパイルコマンド叩いた時のコンパイル元ファイル（左）と吐き出し先（右）を定義したものが下記です。

https://github.com/opensource-workshop/connect-cms/blob/master/webpack.mix.js

コンパイル系のコマンドはなんだ？というところが下記になります。これらを実行するにはランタイム環境としてnpm(node.js)をインストール & npm installする必要があります。

エイリアス	コマンド	説明
dev	npm run dev	npm run development コマンドの短縮形
development	npm run development	ある程度、開発が進んだ用。debugモードで動かしたい時とか用
watch	npm run watch	自動書き出しを設定しています。javascript は触ってませんが、これで作成すると以下のことができます。(css ファイルを １つにまとめられる。scss ファイルを変更するたびにすぐに反映してくれる。bootstrap のスタイルを上書きできる。) npm run watch は ファイルを監視して、npm run dev を起動してる感じ。
watch-poll	npm run watch-poll	npm run watch のオプション--watch-poll付
hot	npm run hot	ローカル用。コーディング時用。ローカルで叩いておくとプロセスが常駐してくれてjsやcssファイル等の編集＆保存時、自動でコンパイルしてpublic配下にデプロイ（ホットリロード）までしてくれます
prod	npm run prod	npm run production コマンドの短縮形
production	npm run production	プロダクション（本番）環境用。minify化圧縮されます。テストが終わったらこのコマンド叩いた版のpublicディレクトリ配下をmasterリポジトリにコミットします。

devDependencies

npmライブラリ	laravel6.x標準○×	機能	依存関係	参考URL
"axios": "^1.6.1",	△ ※1.6.1にupdate	Ajax通信		axios の導入と簡単な使い方 - Qiita
"bootstrap": "^4.0.0",	△ ※v4にupdate	CSSフレームワーク		Introduction#JS · Bootstrap
"cross-env": "^7.0",	○	OSごとの環境変数設定の違いを吸収		環境変数設定は基本cross-envだけどたまにenv-cmdも使う - Qiita
"jquery": "^3.2",	○	JSフレームワーク	bootstrap v4
"laravel-mix": "^6.0.49",	○	ビルドツール		Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita
"lodash": "^4.17.19",	○	JSの便利な関数ライブラリ		・Lodash Documentation ・【JavaScript】lodashの使い方 - Qiita
"popper.js": "^1.15.0",	×	ツールチップ表示（popper.js v1）	bootstrap v4
"resolve-url-loader": "^3.1.0",	○	webpackのloader Sass の url() の相対パス対応	laravel-mix
"sass": "^1.15.2",	○	css拡張のメタ言語
"sass-loader": "^8.0.0",	○	webpackのloader	laravel-mix
"vue": "^2.5.7"	× ※laravel6.xになって標準から外れた	JSフレームワーク
"vue-loader": "^17.3.0",	×	Vue コンポーネントをプレーンな JavaScript モジュールに変換する webpack の loader	vue, laravel-mix
"vue-template-compiler": "^2.7.14"	×	vue-loaderと一緒に使用するvueのテンプレートコンパイラ	vue, vue-loader, laravel-mix
"codemirror": "^6.0.1",	x	コード入力のシンタックスハイライト(コードの単語の色変え)等		https://codemirror.net/
"@codemirror/lang-css": "^6.3.1",	x	codemirrorのcss色強調	codemirror
"@codemirror/lang-java": "^6.0.1",	x	codemirrorのjava色強調	codemirror
"@codemirror/lang-javascript": "^6.2.3",	x	codemirrorのjavascript色強調	codemirror
"@codemirror/lang-php": "^6.0.1",	x	codemirrorのphp色強調	codemirror
"@eonasdan/tempus-dominus": "^6.10.2",	x	DateTimePicker		Datetimepicker
"@popperjs/core": "^2.11.8",	x	ポップアップ表示（popper.js v2）	tempus-dominus v6
"@fortawesome/fontawesome-free": "^6.7.2",	x	アイコンフォント	tempus-dominus v6でも使用	Font-Icon
"sortablejs": "^1.15.2",	x	ドラック＆ドロップでソート順変更		https://sortablejs.github.io/Sortable/ SortableJSでかんたんリスト並び替え

npmに公開するモジュールを開発するときに必要なものを定義する。

• devDependenciesに記載されたものは、自分自身が別プロジェクトの外部モジュールとしてnpm installされる場合にはインストールされない。
• 対して、プロジェクトをGitでクローンしてnpm installした場合は、インストールされる。開発時のみに必要なライブラリで、実行時には役に立たないので、含める必要がない。

--save-devオプション

--save-devオプションを付けると、package.jsonのdevDependenciesに自動登録される。

npm install [email protected] --save-dev

バージョンの記法

--saveオプションで自動で登録されるバージョン指定（^(カレット)と呼ぶらしい）

^1.2.3 := >=1.2.3 <2.0.0
^0.2.3 := >=0.2.3 <0.3.0
^0.0.3 := >=0.0.3 <0.0.4

参考：composerとnpmのバージョニング

constraint	composer	npm	same
~1	>=1.0.0 <2.0.0	>=1.0.0 <2.0.0	✅
~1.2	>=1.2.0 <2.0.0	>=1.2.0 <1.3.0	❌
~1.2.3	>=1.2.3 <1.3.0	>=1.2.3 <1.3.0	✅

https://github.com/composer/semver/issues/14 より引用

dependencies

npmライブラリ	laravel6.x標準○×	機能	依存関係	参考URL
設定なし

依存するモジュールとバージョンを記述する。

• package.jsonが置かれているディレクトリでnpm installすると、dependenciesと(devDependencies)に記述されたモジュールがnode_moduleディレクトリにインストールされる。
• インストールされたモジュールの中にも依存しているモジュールがあれば、それもインストールされる。数珠つなぎのようにdependenciesに記載された依存関係にあるモジュールがインストールされていく。

--saveオプション

--saveオプションを付けると、package.jsonのdependenciesに自動登録される。

npm install [email protected] --save

devDependenciesをインストールせず、dependenciesのみインストールする

npm install --production

関連ページ

• npm
• package‐lock.json

参考

• Laravel5.5/package.json
• Laravel6.x/package.json
• package.jsonの中身を理解する - Qiita
• https://docs.npmjs.com/cli/install