package.json - opensource-workshop/connect-cms GitHub Wiki
Programing tips package.json.
このプロパティがtrueになっていると、モジュールの公開ができない。公開しないプロジェクトは誤って公開しないようにtrueにしておく。
任意の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リポジトリにコミットします。 |
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オプションを付けると、package.jsonのdevDependenciesに自動登録される。
npm install [email protected] --save-dev
^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
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 より引用
npmライブラリ | laravel6.x標準○× | 機能 | 依存関係 | 参考URL |
---|---|---|---|---|
設定なし |
依存するモジュールとバージョンを記述する。
- package.jsonが置かれているディレクトリでnpm installすると、dependenciesと(devDependencies)に記述されたモジュールがnode_moduleディレクトリにインストールされる。
- インストールされたモジュールの中にも依存しているモジュールがあれば、それもインストールされる。数珠つなぎのようにdependenciesに記載された依存関係にあるモジュールがインストールされていく。
--saveオプションを付けると、package.jsonのdependenciesに自動登録される。
npm install [email protected] --save
npm install --production