LaravelにReactを導入してElixirでコンパイルする
LaravelにReactを導入してElixirでコンパイルします。
Laravelのバージョンは5.3です。
最初にLaravelをインストールした時点でのpackage.jsonのdevDependenciesとdependenciesを確認します。
"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.jsonのdevDependenciesとdependenciesは以下のようになりました。
"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"
}