Laravel 5.3から5.4アップグレード：Laravel Mix編

January 26, 2017

はじめに

Laravel 5.4が２日前にリリースされていたことを知り、5.3で開発を進めていたアプリケーションを5.4へのアップグレードを試みました。 Upgrade Guideを見ると、Laravel ElixirからLaravel Mixへの乗り換え方法が記述されておらず、途方に暮れていた所、Laravelリファレンス著者 @localdiskさんから即レスで手順を教えていだきました。ありがとうございます。

@hypermkt packages.json から laravel-elixir をリリースして laravel-mix を足す。node_modules/laravel-mix/setup/webpack.mix.js をコピーすればOK— MATSUO Masaru (@localdisk)

2017年1月25日

まとめると以下となります。

Laravel ElixirからLaravel Mixへの乗り換え手順

package.json内のlaravel-elixir関連を削除して、laravel-mix を追加

"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",

を以下に変更します。 laravel-mix のバージョンは本家のリリースを見たところ、v0.5.3 が最新でしたのでそちらを指定しました。

"laravel-mix": "^0.5.3",

laravel/laravelリポジトリから package.jsonのscriptsセクションをコピー

ビルドツールがGulpからWebpackに変更となるためです。

"scripts": {
"dev": "node node_modules/cross-env/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/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",
"hot": "node node_modules/cross-env/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/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 Elixirの gulpfile.js に当たるファイルです。

$ cp node_modules/laravel-mix/setup/webpack.mix.js .

webpack.config.js を編集したい場合は node_modules/laravel-mix/setup からコピーします。

$ cp node_modules/laravel-mix/setup/webpack.config.js .

—config のファイルパスを調整すれば完了です。マニュアルによると webpack.config.js の配備は必須ではなく上級者用とのことなので、通常利用の場合は webpack.mix.js だけコピーすれば問題無さそうです。

"scripts": { "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js", "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js", "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=webpack.config.js", "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js" },

パッケージインストール

まだ yarnではインストールできないとのことなので npm install します。

$ npm install

以上です。

動作検証

ビルド用の対象ファイルがあることが前提ですが、 npm run dev を実行すると成功と表示されます。

DONE Compiled successfully in 1649ms

Asset Size Chunks Chunk Names
dist/app.js 2.75 kB 0 [emitted] app
dist/app.css 0 bytes 0 [emitted] app
mix-manifest.json 68 bytes [emitted]

終わりに

5.4もリリース直後ということで、もしかしたら同じように悩まれている方がいるかもしれないので、@localdiskさんに教えて頂いた内容そのままですがブロク記事にまとめさせて頂きました。参考になれば幸いです。