Laravel Mixで Laravel + React + BrowserSyncで今風のWeb環境をラクラク構築

背景

仕事でサーバサイドをlaravel、フロントサイドをReactでやろうということになりました。
Reactってbabelとかwebpackとかごちゃごちゃしている物でいっぱいで皆結構嫌になりません？
create-react-app：https://github.com/facebook/create-react-app
とか使うと、簡単なセットアップができるらしいですが、自前でやると

• gulp

• webpack

• babel

• BrowserSync

など、開発する前に色んな設定をしなければならんので大変でした。

結論

laravelの5.4以降ではデフォルトでLaravel Mixという、reactとかvueとかを編集して保存すると自動コンパイルする機能があるのでそれを活用すれば簡単にReactとlaravelの環境設定ができます。

具体例

編集するファイルはプロジェクト直下にあるwebpack.config.jsのみです。
デフォルトでは以下のようになってると思います。

let mix = require('laravel-mix');

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

解決

今回はreactのトランスパイルとブラウザのリロードを自動化したいので以下のように書き換えました。

let mix = require('laravel-mix');

mix.react('resources/assets/js/', 'public/dist/bundle.js') //第一引数以下のreactファイルを第二引数のファイルにトランスパイル
   .sourceMap() //マップファイル作成
   .browserSync({
     files: 'resources/assets/js/**/*', // このパスにあるファイルが変更されたらリロード
     proxy: 'localhost:8000' // php artisan serveで起動したサービスのドメイン
   })

実行方法

• サーバーを起動 : php artisan serve

• これを実行してファイル監視 & リロード : npm run watch

以上で、Reactを編集すると自動で変換してリロードすることができます。
sassなども同じく変換することができるので、詳しくはLaravelの公式を見ればいいと思います。

npm run watchでエラーが起きた場合

私の環境ではpackage.json内のwebpackのバージョンが4.1.0だったため次のようなエラーが起きました。
10% building modules 7/9 modules 2 active …toring/resources/assets/js/bootstrap.jsTypeError: dep.getResourceIdentifier is not a function
どうやらwebpackモジュールのバージョンを下げないといけない見たいなので、ここ参照して3.11.0に戻しました。
npm i -D webpack@3.11.0
これで、上記のエラーは消えました。

感想

環境構築するって結構調べることあって大変、まあ公式もたまには見るの大事。