package.json - opensource-workshop/connect-cms GitHub Wiki

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 ファイルを 1つにまとめられる。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

関連ページ

参考

⚠️ **GitHub.com Fallback** ⚠️