Laravel MixでReactとMobxを使う

はじめに

LaravelでReactとMobxを使いたかったのだが、なるべくLaravelで準備されているものを使いたかったので、フロントエンドのトランスパイル周りはLaravel Mixを使うことにした。これはその時の設定の備忘録となる。なお、最小限動くだけに留めている。

Laravel Mix:
https://readouble.com/laravel/5.4/ja/mix.html

package.json

Laravelにデフォルトで入っているものに最小限のものだけ追加したもの。

js.package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "mobx": "^3.1.9",
    "mobx-react": "^4.1.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

webpack.mix.jsの設定

プロジェクトのルートディレクトリにwebpack.mix.jsがあるのでこれを編集する。mix.jsのところをmix.reactに書き換えるだけでよい。なお、実際のプロジェクトでは複数のjsをトランスパイルしたかったので、mix.reactを複数書いている。

編集前

webpack.mix.js

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

編集後

webpack.mix.js

mix.react('resources/assets/js/foo.js', 'public/js/foo.js')
mix.react('resources/assets/js/bar.js', 'public/js/bar.js')
mix.sass('resources/assets/sass/app.scss', 'public/css')

babelrcの設定

Laravel Mixは内部でbabelの設定を持っているようだが、ルートディレクトリに.bablercを作成するとそれが優先的に使用される。以下はその設定となる。

.babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

おわりに

あとはpackage.jsonで定義されているscirpit(npm run prodとか)をデフォルトのまま使用すれば正常にトランスパイルされる。