前のパートに戻る 完了して次のパートへ  

  2-2 package.jsonの設定

この章ではJavaScriptライブラリ*1のパッケージマネージャーであるnpmと、npmプロジェクトの情報管理しているpackage.jsonについて解説してきます。

*1 ライブラリとはよく利用する関数や機能、データなどをまとめたファイルのことを指します。

全てを理解することは難しいので、まずnpmを動かすことを優先していきましょう。

package.jsonの各項目について


続いてLaravel6.8をインストールした時にできるデフォルトのpackage.jsonを見ていきます。 package.jsonはルートディレクトリの1階層目に存在します。

以下がLaravel6.8のデフォルトルートディレクトリのフォルダとファイル一覧です。

laravel_vue_quiz
├── app
├── artisan
├── bootstrap
├── composer.json
├── composer.lock
├── config
├── database
├── package-lock.json
├── package.json
├── phpunit.xml
├── public
├── readme.md
├── resources
├── routes
├── server.php
├── storage
├── tests
├── vendor
└── webpack.mix.js

以下がpackage.jsonの中身です。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0"
    }
}

package.jsonに記述されているprivatescriptsdevDependenciesについて解説します。

private

privateとはnpmモジュールとして公開するか否かを設定します。 今回はnpmモジュールを公開しないので、privateはtrueのまま変更せずに設定します。

scripts

scriptsの役割は、実行するコマンドの内容を指定した値でセットすることです(コマンドのショートカットとも言えます)。

下記に例を挙げます。

    "scripts": {
        "dev": "npm run development",

npm run devというコマンドを実行すると npm run developmentというコマンドを実行するのと同じ意味になります。

devDependencies

devDependenciesは依存ライブラリ*2を管理する項目となります。

*2 依存ライブラリとはプログラムの実行ファイル以外に必要となるファイルことを指します。

デフォルトでは記載されていませんが、dependenciesがという項目もあります。

dependenciesは必須なライブラリに対して、devDependenciesは開発効率を上げるなど必須ではありませんが、あると役に立つライブラリとして管理します。

ライブラリのインストール


これらpackage.jsonに記述されているscriptsdevDependenciesdependenciesを使うには、 npm installを実行して、必要なライブラリを一括でまとめてインストールする必要があります。

早速、npm install実行して進めていきましょう。

$ npm install

> [email protected] install /Users/Desktop/php-projects/laravel_vue_quiz/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[fsevents] Success: "/Users/masato/Desktop/php-projects/laravel_vue_quiz/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
added 1062 packages from 498 contributors and audited 17153 packages in 37.999s
found 0 vulnerabilitiess

コンソールに以下の表示が出れば成功です。 失敗した場合は、赤い文字でErrorメッセージが多数出ます。 今回はWARNのみです。

WARNは警告なので基本的に無視しても動きます。 依存性・非推奨のバージョンなど細かいものが表示されたりします。

added {n} packages from {n} contributors and audited {n} packages in 53.556s

またpackage-lock.jsonというファイルが生成されます。 何もいじっていないのにライブラリのバージョンが変わって動かなくなることを防ぐためのファイルです。

個別にライブラリをインストールしたい場合は、npm install {library}とコマンドを実行します。

例えばaxiosのみをインストールしたい場合は、下記のコマンドを実行します。

$ npm install axios

また個別ライブラリインストールオプションとして--save-devを付けると、devDependenciesでライブラリを管理します。

axiosdevDependenciesで管理する場合、下記のコマンドを実行します。

$ npm install axios --save-dev

何もオプションをつけない場合は、dependenciesでライブラリを管理します。

最低限知っておくべき情報の記載は以上です。

詳しく調べると様々なことが疑問に思うかもしれませんが、詳しくはnpm公式ドキュメントを参照してください。 日本語ドキュメントは不十分ですので、英語の本家ドキュメントを参照しましょう。

以上で今回のパートは終了です。

お疲れさまでした。

議論

0 質問

このコースの評価は?