Laravel Mixでjsファイルを圧縮

Laravelプロジェクトに入ったところにある、このファイルに追記。

webpack.mix.js

 

対象のjsファイルと、出力先のディレクト

Laravel で JavaScriptをやるときの手法 - Qiita

 

 

その後、npm run dev を実行したところ、

エラーが起こった。

> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: cross-env: command not foundnpm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ 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`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:

 

 

cross-env が要るらしい

npm install --save-dev cross-env

Laravel 5 - npm run watch時に「sh: 1: cross-env: not found」のエラー発生|teratail

 

 

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run prod

Compiling Assets (Mix) - Laravel - The PHP Framework For Web Artisans

 

 

無事、圧縮ができた。

 

しかし、javascriptの一部が動かなくなった。

 

 

さらに、app.jsとか要らないものが増えている。

これであれば、jsを書き換えた際に都度、改行とスペースを手動で削除した方が楽だな。

 

というわけで、秀丸で改行とスペースを削除することにした。

ファイル数も少ないし、いまのところそちらの方が良さそう。

 

 

 

webpack.mix.js の記述の仕方がよくなかったのかもしれない。

左が出力元で、右が出力先

mix.js('src/js/main.js', 'dist/js/');

Webpack使うならLaravel Mixでラクをする | codechord

Laravel mix事始め - Qiita

 

修正するファイルは以下のみ。

webpack.mix.js

 

npm run production を実行すると、以下が生成される。

https://www.ritolab.com/entry/30#aj_6

public/js/xxxxxx.js
public/mix-manifest.json

 

実行結果

DONE Compiled successfully in 2251ms

 

 

実行するコマンド

npm run production

 

 

新規ファイルを追加する場合、以下に追記

/XXXXXXRepo/webpack.mix.js

 

 

npm入門 - Qiita

以下エラーは npm install で解決

> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: cross-env: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ 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`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ec2-user/.npm/_logs/2021-10-23T00_08_29_482Z-debugl

 

 

npm installとnpm updateの違い

https://ucwork.hatenablog.com/entry/2018/12/28/025711

npm install
 未インストールのパッケージをインストール
 指定より上バージョンのパッケージが存在してもインストールしない
npm update
 未インストールのパッケージはインストールしない
 指定より上バージョンのパッケージが存在すればインストールする

npm ci
 package-lock.jsonに指定された固定バージョンのパッケージをインストール

 

 

以下を実行したら動かなくなったので危険

npm install -g npm-check-updates
npm-check-updates -u

 

 

 

使うコマンドは以下

    npm --version
    npm run production
  npm update
    npm --version
    npm run production
  npm audit fix
    npm --version
    npm run production
  npm install
    npm --version
    npm run production