最近 PHP のフレームワークとして Laravel をよく使用している。 Laravel にバンドルされている ES6 や SASS を JavaScript や CSS にトランスパイルする仕組みがよくできていると感心していた。 この Laravel Mix という仕組みが実は Laravel を使用していないプロジェクトでも簡単に導入できたのでここに書き記しておく。

導入

  1. Laravel 公式を参考に Laravel の新規プロジェクトを適当に作る
  2. そのプロジェクト直下の package.json と webpack.mix.js を取り出して適用したいプロジェクトにコピー
  3. そのプロジェクト直下の resources/js/app.js と resources/js/bootstrap.js と resources/sass/app.scss を取り出して同じく適用したいプロジェクトにコピー
  4. package.json があるディレクトリで npm install を叩く

npm run dev を叩いて public/js/app.js や public/css/app.css にビルドされるのを確認する。 ビルド先を変えたい場合は webpack.mix.js を適当に書き換える。

使い方

Laravel 公式参照。 基本的に npm run watch を叩くと変更を監視してくれるのでその状態のまま開発を進めると楽。