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公式ドキュメントを参考にしながら書く。

https://readouble.com/laravel/5.5/ja/mix.html?header=%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%25A0%25E8%25A8%25AD%25E5%25AE%259A%25E3%2581%25AE%25E3%2583%259E%25E3%2583%25BC%25E3%2582%25B8

#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
```