More than 5 years have passed since last update.

Laravel Mixとは

Last updated at 2018-07-30Posted at 2018-07-30

Laravel Mix

多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供している
わざわざ独自にWebpackを設定したり、babelの設定をせずにReact.jsやVue.jsを使うようすることができる

下記コマンドでLaravel+Reactのプロジェクト作成すると使えるようになっている。
具体的には、npmコマンドを実行してLaravel Mixの具体的な機能を使用できる。

$ composer create-project laravel/laravel sample "5.5.*"
$ php artisan preset react
$ npm install

npm run
- package.jsonのscriptsに記載されているタスク実行機能を呼び出すコマンド
npm run dev
- 全タスク実行
- package.jsonのscripts　のdevで設定している内容を実行
npm run production
- 全タスク実行を実行し、出力を圧縮
- package.jsonのscripts　のproductionで設定している内容を実行
npm run watch
- ターミナルで実行し続け、関連ファイル全部の変更を監視する。そして、ファイルの変更があると自動的に再コンパイルする
- package.jsonのscripts　のwatchで設定している内容を実行
npm run watch-poll
- 特定の環境のWebpackでは、ファイル更新時に変更されない時がある。その時に使用する
- package.jsonのscripts　のwatch-pollで設定している内容を実行

Laravel MixはReactをサポートするために、Babelプラグインを自動でインストールしてくれている。それを使用開始するには、下記のようにmix.react()を記述する
実際には、Laravel Mixは最適なBabelプラグインとしてbabel-preset-reactをダウンロードし取り込んでいる
babel-preset-reactとは？
BabelでJSXを変換するためのモジュール。Babelでは変換対象のモジュールのことをプリセットと呼ぶ

webpack.mix.js

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

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

ReactでJSXとES2015を使用するためには、babel-preset-reactとbabel-preset-es2015が必要ははずだが、babel-preset-es2015はどこでインストールされている？
下記記述で以下のような機能を取得することができるみたいだが、mix.js()を使用しないと使えないみたい。なら、別のところでES2015を使用できる設定をしている？
- ES2015記法
- モジュール
- .vueファイルのコンパイル
- 開発環境向けに圧縮

webpack.mix.js

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