Laravel学習のためのnpmの基本的な使い方

Laravel、React、Vue.jsを勉強しているとnpmのことがよく出てくるので、自分なりに概略をまとめてみました。

また、npmのインストールなどは、Ubuntu Server 20.04LTSで検証しています。

npmの概要
npmのインストール (Ubuntu Server 20.04LTS)
Laravelでnpmを使う (Bootstrap + Reactを準備する）

npmの概要

npm (Node Package Managerの略）は、Wikipediaでは、”package manager for the JavaScript programming language” (JavaScript言語のためのパッケージマネージャ）と説明されているが、概ね、この理解が一般的であると思われる。

ただ、本家サイトの解説によれば、①Webサイト、②コマンドラインインターフェース (CLI)、③レジストリ、から成るとあり、特段、CLIだけを指すわけではない。

なお、JavaScriptのサーバーサイド技術であるNode.jsの標準のパッケージ管理ツールだが、JavaScriptライブラリ全般を扱うようである。

npmは、要は、JavaScriptライブラリのインストール・アンインストールなどの管理を容易にするためのツール。

npmのインストール (Ubuntu Server 20.04LTS)

aptを使う場合は、以下のコマンドでインストールする。

$ sudo apt install nodejs npm

これだけ。
ただ、aptでは最新版は入手できない。

最新版が欲しければ、ここのGitHubを参照すればやり方が載っているが、具体的には以下の通り。

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Laravelでnpmを使う (Bootstrap + Reactを準備する）

例として、LaravelでBootstrapとReactを使う準備をnpmで実施してみる。

「Laravel new xxx」でプロジェクトを作ると、そのフォルダの直下にpackage.jsonが作成される（※JSONはJavaScriptで使用されるテキストベースのフォーマット）。
中身は以下のようになっている。

{
    "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 --disable-host-check --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": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }
}

devDependenciesの箇所が、プロジェクトで使用する依存関係のあるライブラリの一覧になる。
上のscriptsは、後でビルド時に実行されるコマンドの定義。

フロントエンドパッケージをLaravelにインストール

詳細は公式ドキュメントにもあるが、LaravelはBootstrap、React、Vueを提供しており、Lavaralではnpmを使用する。

Laravelへのパッケージインストールは以下のコマンドで実施（カレントディレクトリをプロジェクトのディレクトリにして実施）。

$ composer require laravel/ui

終了すると、こんなメッセージが出る。

BootstrapとReactを使う場合は、以下のコマンドをさらに入力して実行する。

$ php artisan ui bootstrap
$ php artisan ui vue

うまく行くと、こんなメッセージが出る。
（BootstrapもReactもメッセージは同様）

この時点で、package.jsonファイルを見ると、BootstrapとReact（jQueryなど、さらに付随するライブラリも）が追加されているのが分かる。

"devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0"
}

そして、npmを使ってライブラリをインストールする。