Laravel Mix をver5から6へアップグレードした

Laravel Mix(Laravelのアセットコンパイルライブラリ)のver5.1を使っていたんですが、
polyfillを導入するにあたってアップグレードしました。

その時に複数回エラーと格闘したので、備忘録として残しておきます。

やることをざっくりまとめ

・laravel-mixのバージョンを上げる
・package.jsonのscriptsを編集
・webpack.mix.jsを編集する
・Node.jsのバージョンをあげる

laravel-mixのバージョンをあげる

私の場合は現行で最新版のpolyfillを入れるにあたって
laravel-mix@^6.0を入れるようログで勧められました。
誘われるままnpm install

npm install laravel-mix@^6.0.0

とりあえずバージョンだけはあげられました。

package.jsonのscriptsを編集

npm run watchを打ったところ、以下のエラーが出力。

[webpack-cli] Unknown argument: --hide-modules

調べてみたところ、laravel-mixの5系で使えていた--hide-modulesオプションが、6系ではなくなったらしい。
Laravel Mixリファレンス: Update Your NPM Scripts

というか、リファレンスを見ると6系のscriptsの書き方が大分変わっている・・・。

リファレンスにのっとり、package.jsonのscriptを書き換える。

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

ちなみに、6系では--hide-modulesを使うまでもなくnode_modules以下をwatch対象から外してくれるようです。
(リファレンスWatch Ignores参照)

webpack.mix.jsを編集

リファレンスをよくよく見てみると、バージョンアップによりwebpack.mix.jsも少し変更があったようです。
使っているjsフレームワークに合わせて、少し編集を加えます。

参照:リファレンス API for JavaScript Frameworks

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').vue();

私の場合はVueを使っていたので上記のようにしましたが、Reactを使っている方はreact()でイケるようです。

Node.jsのバージョンをあげる

ここまでやってnpm run watchをしても、まだエラー出ました。

You are using an unsupported version of Node. Please update to at least Node 12.14

どうやら使っているNode.jsのバージョンが古いようです。

node -v
# => 10.16

確かに古いので、バージョンを上げることにしました。

# バージョンを指定してインストール
nodebrew install-binary v12.14

# バージョンを指定
nodebrew use v12.14

インストールするだけでなく、useも忘れずにしましょう。
これでlaravel-mixのバージョンアップは完了です!

補足①ここまでの手順を試してもエラーが出る時

ここまでやってもエラーが出る場合は、一度フロントエンドライブラリを入れ直してみましょう。

// ライブラリ削除
rm -r node_modules

// ロックファイルを削除してバージョン固定を解除
rm package.lock.json

// 過去にインストールしたライブラリのキャッシュを削除
npm cache clean

// 上記コマンドで初期状態に戻した上でのインストール
npm i

補足②laravelでのpolyfill設定

laravel-mix-polyfillのページを見ればわかることですが、以下の通りです。

const mix = require('laravel-mix');
require('laravel-mix-polyfill');


mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "firefox 50, IE 11"
    }).vue();