npm を使用していろんなものをインストールしてみる

準備

↓のコマンドを実行してpackage.json を生成する

npm init -y 

Admin LTE3

Admin LTE3のインストール

npm install admin-lte@^3.0 --save

・結構時間かかる

参考：https://adminlte.io/docs/3.0/

JQuery

JQueryのインストール

npm install jquery --save

参考：https://launchcart.jp/blog/npm%E3%81%AB%E3%82%88%E3%82%8B%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E7%AD%89%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/

Font Awesome

Font Awesomeのインストール

npm install --save @fortawesome/fontawesome-free

参考：https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers

webpack

webpackのインストール

npm install --save-dev webpack

参考：https://www.npmjs.com/package/webpack

webpackのバージョンを確認

npx webpack -v

↓確認するとwebpack-cliというライブラリも必要になると言われたため

CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".

webpack-cliをインストール

npm install --save-dev webpack-cli

webpack.config.js

webpack.config.js（webpackの設定ファイル）の作成
Laravel Mix自体やその他必要なパッケージが記述済み
scriptsにはwebpackを実行するためのスクリプトも記述されている

touch webpack.config.js

エントリーポイント、ファイルの出力場所、プラグインなどを設定することができる
webpack.config.jsを書き換える

webpack.config.js

const path = require('path');

module.exports = {
    // エントリーポイントの設定
    entry: './src/my-main.js',
    // ビルド後、'./dist/my-bundle.js'というbundleファイルを生成する
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-bundle.js'
    }
};

$ cd src
$ touch my-main.js
$ touch my-func.js

my-main.js

var func = require('./my-func');

var res = document.createTextNode(func());
document.body.appendChild(res);
my-func.js
module.exports = function () {
    return 'my-test';
};

webpack.mix.js

webpack設定ファイル（webpack.config.js）のラッパー。
ここにコンパイルしたいファイル・バンドルしたいファイルなどを記述していく。

webpack.mix.js

その他（sass,CSSなど）のファイルの書き方はlaravel公式ドキュメントを参考にしながら書く。

package.json

package.jsonのscriptのdev、watch、hot、productionの""の中身を以下のように書き換える。

package.json

"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

Laravel Mixの実行

npm run <スクリプト名>

でそのスクリプトを実行できるようになる

npm run dev

package.jsonに書いてあるスクリプトが実行され、設定ファイルに記述したコンパイルやバンドルが実行される

他にも・・・

圧縮されたファイルの出力

npm run production

自動コンパイル

npm run watch-poll