Laravel以外でLaravel Mixを使う方法

Laravel Mixって便利ですよね。

ホットリロードもできるし、面倒な設定をしなくても簡単にプロダクションビルドもできる。

というか、結局単なるNodeのライブラリなわけなので、フレームワークを使っていないプロジェクトでも簡単に導入できるのではないかと思い、試してみました。バージョニングにも対応しました。

準備

僕は元々他のLaravelのプロジェクトがあったので、そこからコピーしてきました。
プロジェクトがない場合はlaravel newで作りましょう。

• resources/assetsフォルダ
• package.json
• webpack.mix.js
• .gitignoreにnode_modulesを入れておく

上記の中身は適宜使うプロジェクトに応じて更新しておきます。

初期化

Nodeのパッケージをインストールします。(npmのコマンドでもいいです）

yarn install  

起動してみる

yarn run hot  

これで正常にビルドできればほぼ問題ないと思います。

動かしてみる

あとは実際にhtml内に組み込んでみます。

<link rel="stylesheet" href="<?= mix('css/app.css') ?>" type="text/css">  

<script src="<?= mix('js/app.js') ?>"></script>  

上記の通り、Laravelのヘルパーに含まれるmix関数だけはPHP側に用意が必要です。公式のリポジトリからコピーして修正してみたものが下記です。  
（公式のものはLaravelのヘルパーを多用しているためそのままは使えません）

ちなみにhotまでしか試していないので後半は微妙に動かないかもしれません。とはいえmix-manifest.jsonを読んでそのパスを返しているだけなので、処理自体は簡単なためダメだったら適宜修正してみてください。

あ、あと適当にBASE_DIRという定数を入れてしまっているので適宜修正してください。

ちなみにコード中にThe Mix manifest does not exist.のエラーがありますが、そのjsonファイルが無いということなのでビルドし忘れてるか、コミットする方針ならコミットし忘れてるか、というところが原因だと思われます。

    function mix($path, $manifestDirectory = '')  
    {  
        static $manifests = [];  

        if ($path[0] != '/') {  
            $path = "/{$path}";  
        }  
        if ($manifestDirectory && $manifestDirectory[0] != '/') {  
            $manifestDirectory = "/{$manifestDirectory}";  
        }  
        $manifestDirectory = substr($manifestDirectory, 1);  

        $hotPath = BASE_DIR . "{$manifestDirectory}/hot";  
        if (file_exists($hotPath)) {  
            $url = file_get_contents($hotPath);  
            if (preg_match('/^https?:\/\//', $url)) {  
                $url = preg_replace('/^https:/', '', $url);  
            }  
            return "{$url}{$path}";  
        }  

        $manifestPath = BASE_DIR . $manifestDirectory . '/mix-manifest.json';  
        if (! isset($manifests[$manifestPath])) {  
            if (! file_exists($manifestPath)) {  
                throw new Exception('The Mix manifest does not exist.');  
            }  
            $manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);  
        }  
        $manifest = $manifests[$manifestPath];  
        if (! isset($manifest[$path])) {  
            throw new Exception("Unable to locate Mix file: {$path}.");  
        }  
        return $manifestDirectory.$manifest[$path];  
    }  

これでページのソースに表示されているcssとjsのURLを開いてみて何かしら表示されれば成功です。

Laravelで通常行っている様な感覚でコンポーネントの追加、配置、ホットリロード、プロダクションビルドなどができるようになります。別にPHPじゃなくても良さそうな感じです。

ビルド

公開フォルダへのパスが違う場合などはビルド時にno such fileエラーになるようです。webpack.mix.jsに下記のような一文を追加してください（フォルダは適宜指定してください）。

mix.setPublicPath('.');

まとめ

LaravelじゃないけどLaravel Mixが便利だからそのまま使いたい、と思っていた方は是非お試しください。

2018/7/15追記）
やっぱり他のフレームワークでも使えて良いみたいですね。僕がPHPメインなのでやっぱり言語でwebpackをラップするというのは非常に違和感があります。
RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめる