omachizura

仕事メモ、役に立ったスキルをまとめています。


LaravelにReactを導入してElixirでコンパイルする

LaravelにReactを導入してElixirでコンパイルします。Laravelのバージョンは5.3です。

最初にLaravelをインストールした時点でのpackage.jsondevDependenciesdependenciesを確認します。

"devDependencies": {
  "bootstrap-sass": "^3.3.7",
  "gulp": "^3.9.1",
  "jquery": "^3.1.0",
  "laravel-elixir": "^6.0.0-9",
  "laravel-elixir-vue": "^0.1.4",
  "laravel-elixir-webpack-official": "^1.0.2",
  "lodash": "^4.14.0",
  "vue": "^1.0.26",
  "vue-resource": "^0.9.3"
}

dependenciesはありませんでした。Laravel5.3ではvue.jsというフレームワークをデフォルトで使用しているようですが、Reactを使いたいため、削除します。他にもいらない項目を削除した結果、以下のようになりました。

"devDependencies": {
  "gulp": "^3.9.1",
  "laravel-elixir": "^6.0.0-9"
}

gulpfile.jsを以下のようにします。

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.browserify("app.js");
});

この状態でgulpコマンドを実行すると、以下のエラーになってしまいました。

Instllation Required

To use "mix.browserify()", please run the following command, and then trigger gulp again.
=======================================================
npm install laravel-elixir-browserify-official --save-dev
=======================================================

「laravel-elixir-browserify-officialをインストールしてください」とのことなので、指定されたとおりのコマンドを実行します。

npm install laravel-elixir-browserify-official --save-dev

その後、再度gulpコマンドを実行すると、今度は以下のエラーになってしまいました。

Error: Cannot find module 'react' from ...

reactのモジュールがないと言われているので、reactのドキュメントの「Using React from npm」を参考に、以下のモジュールをインストールしました。

npm install --save react react-dom babelify babel-preset-react

その後、再度gulpコマンドを実行すると、今度は無事に成功しました。

resources/assets/js/app.jsがコンパイルされ、public/js/app.jsに出力されます。

いろいろとインストールした結果、package.jsondevDependenciesdependenciesは以下のようになりました。

"devDependencies": {
  "gulp": "^3.9.1",
  "laravel-elixir": "^6.0.0-9",
  "laravel-elixir-browserify-official": "^0.1.3"
},
"dependencies": {
  "react": "^15.3.2",
  "react-dom": "^15.3.2",
  "babel-preset-react": "^6.16.0",
  "babelify": "^7.3.0"
}