Laravel-Mix on ララジャパン

光速のVite

Sun, 30 Oct 2022 07:08:54 +0900

ここ1年位で良く聞くようになったVite。Vue.jsの生みの親であるEvan Youさん開発、との事なので、 Vue.jsとの親和性が高いのだろうな、と。Laravel + Vue.js のスタックで開発する機会があれば使ってみたいな、と。私の中ではその程度の位置付けでした。

しかし、今年の６月、Laravel 9.2.0のリリース時のTaylerさんの以下のツイートを見て、認識を改めました。

Today we're pumped to announce that new Laravel projects use Vite to bundle frontend assets. Breeze and Jetstream have been updated as well. 🔥

Experience lightning fast Hot Module Replacement when using the new Breeze / Vite stack with Inertia Vue or React. ⚡
— taylor otwell 🪐 (@taylorotwell) June 28, 2022

光速のHMR。。。是非使ってみたい！

Viteが採用された理由

従来のLaravelはアセットバンドラにwebpackをラップしたLaravel-Mixを使うのが一般的でした。この決定を知った時、私はViteについて冒頭に述べた程度の認識だったので、

「なぜViteに変えるの？Laravel-Mixの何がダメなの?」と、思いました。因みに、同様の質問がTwitterで投げられており、Taylerさんがシンプルに

“much faster(断然速いから)"と答えていました。

この業界においてスピードは正義ですから、より速いツールが開発されたら導入しない理由はないですよね。でも何がどう速いのでしょうか？もっと知りたくなり調べてみました。

調べていく内に、Laravel-MixとViteは全く別物、ということが分かってきました。

Laravel-Mixの問題点

Viteが速いということは、Laravel-Mixが遅いという事ですが、具体的にどの部分が遅かったのでしょうか？

従来のLaravelの開発ではnpm run devを実行すると、resources配下から必要なアセットファイル（cssやjsなど）をかき集め、依存関係を解決しつつ１ファイルにまとめるという処理が行われていました。アセットバンドルについてはlaravel-mixでフロントエンドを開発にてkhino氏が詳しく解説しているので是非ご一読下さい。

開発者のアクションとしては、

jsファイルを変更する
npm run dev を実行しアセットをバンドル（ビルドともいう）する
ビルドした成果物をブラウザで確認する

といった感じです。

プロジェクト規模が大きくなりファイル数が多くなるとバンドル処理に時間が掛かり、開発効率が落ちてしまいます。私のようにjsをふりかけ程度にしか使っていない場合は大したこと無いですが、VueでSPAを開発している場合などは、上記のフローを高頻度で繰り返し開発するため、変更〜確認までにラグがある事は大きなストレスになります。

Viteはノーバンドル

ではViteはどうなのか？

公式ページに詳しく書いてありますが、Viteは開発サーバにおいて基本バンドルしません。パッケージやライブラリなど開発者が基本変更しないようなファイルは事前バンドルされるのですが、開発者が頻繁に変更するソースコードについてはバンドルせずブラウザに提供するのです。

最近のブラウザはES6で導入されたモジュール機能(import, export)に対応しており、ブラウザが表示するページに必要なモジュールを把握しそれらをimportしてくれます。そして、開発者がファイルを編集した際はViteがその変更を把握し、変更されたモジュールのみ再読み込みしてくれるのです。

アセットのバンドルも無ければ、リロード範囲も最小限な為、前項で問題とした変更〜確認までのラグというのが最小限に抑えられるという訳です。

Viteを体感してみる

冒頭のTaylerさんのTweetにある通り、Laravel 9.2.0 以降ではViteがフロントエンドのデフォルトビルダとして採用されており、npm run devを実行するとViteがHMRモードで起動します。

HMRとはHot Module Replacementの略でコードを変更し保存するとページのリロード無しでブラウザに変更が反映されます。

驚いたのは、保存してからブラウザに反映されるまでの速さです。文字通り一瞬で全くラグを感じませんでした。Vite恐るべし。

本番用にはバンドルする

開発時においてはバンドルせずにアセットを提供する事で開発者をハッピーにしてくれるViteですが、本番においてはバンドルした方がハッピーな様です。

なぜなら、ノーバンドルでアセットを提供した場合、ブラウザが逐次必要なモジュールをネットワーク経由で取得する必要があり非効率だからです。通常ネットワーク経由でデータを取得する際、細切れになったデータをロードするよりも、それらを１つにまとめてロードした方が効率的なのです。

開発時においてそれが問題にならないのは取得するデータが全てローカルに存在し、ネットワーク経由で取得する必要が無い為です。

まとめ

長く（と言っても数年）Laravel-Mixを使って開発していると、ついアセットはバンドルするもの、という固定観念に縛られがちですが。開発時は敢えてバンドルせず、ブラウザ側で出来ることはブラウザに任せよう、という思い切った試みがパズルのピースのように完璧にバチッとはまっており、改めて素晴らしい発明だなぁ、と思いました。Evan Youさん、あっぱれです。

app.jsとbootstrap.js

Mon, 14 Oct 2019 23:47:36 +0900

app.jsは、laravel-mixでコンパイルされて作成されてall.jsとなります。つまり、ソースファイルです。いったい何が含まれているか興味あります。今回は、このファイルの中身を見てましょう。もうすでにLaravelは、6.1のバージョンになっていますが、ここでは5.8をもとにします。

resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

上のコードを見て、まず、何これ？、と思うのは、７行目のrequire()の関数です。php言語では昔よく使っていた関数だけれど、これはjavascriptのファイルでphpのファイルではありません。私のように、HTMLのファイルの中でしかjavascriptを触ったことがない人には、まったく見たことがないjavascriptの関数です。

調べたところ、require()は他のjavascriptのファイルで定義されているモジュールを読み込むためのNode.jsの関数ということがわかりました。一般的にウェブで使用しているjavascriptにはモジュールの概念がないゆえに、Node.jsで発明されたらしい。その後に、ES6の登場でjavascriptにはモジュールの機能が正式に対応されるようになりますが、そこでは、require()でなく、importが使用されています。歴史的な経過により複雑になっているので、混乱しそうなところですね。

さらに、require(’./bootstrap’)と書かれているので、もしかして、CSSフレームワークのBootstrapのこと？とも思いますが、ここではそのBootstrapではなく、単に同じディレクトリにある、bootstrap.jsをモジュールとして読み込んで実行する、ということです。またまた、混乱しそうなところですが、忘れてならないのは、これらのjsファイルはNode.jsの世界のjsファイルで、ブラウザーのjsではないということです。以前に書いたように、最終的にはwebpackなどのツールを使用して、Node.jsのプログラムをブラウザー用に変換します。

次に、そのapp.jsが参照しているbootstrap.jsを見てみましょう。

resources/js/bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

lodash, popper.js, axiosといろいろなもの読み込んでいますが、注意してもらいのは、１１行目からの以下。

    window.$ = window.jQuery = require('jquery');
 
    require('bootstrap');

最初の行では、require()でjqueryのモジュールを読み込んでいます。そして、jqueryのDOMセレクターで使われる、$やjQueryをwindowの変数に割り当ててグローバルで使用できるようにしています。

そして、そう、次の行で今度は本当のCSSフレームワークのBootstrapのモジュールを読み込んでいます。Bootstrapはjqueryに依存しているゆえに、jqueryがその前にロードされています。

Bootstrapのためにロードされているjqueryですが、もちろん通常の目的でも使用できます。次回は、インラインのスクリプトでjqueryを使用してみます。

jsやcssファイルのバージョン化

Sun, 06 Oct 2019 07:45:52 +0900

laravel-mixの続きです。まだ続きそうなので、連載ものにしました。右にリストされているCATEGORIESのフロントエンドの開発です。

今回は、laravel-mixで作成されたjsやcssのファイルがどのようにbladeで参照されているかにフォーカスします。

asset()

再びレイアウトのbladeファイルの中身を以下に掲載します。

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
...

上の中の以下に注目してください。

...
<script src="{{ asset('js/app.js') }}" defer></script>
...
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
...

asset()は、app.jsなどのファイルが存在するURLを生成するヘルパーです。与えた引数の値をURLにしてくれます。

$ php artisan tinker
Psy Shell v0.9.9 (PHP 7.2.16 — cli) by Justin Hileman
>>> asset('js/app.js')
=> "http://localhost/js/app.js"

という具合です。

URLのサイトやディレクトリを変えたければ、.envを編集します。

$ cat .env
...
ASSET_URL=https://example.com/assets

と設定すれば、

>>> asset('js/app.js')
=> "https://example.com/assets/js/app.js"

となります。

また、先のレイアウトの出力は、

...
<script src="https://example.com/assets/js/app.js" defer></script>
...
<link href="https://example.com/assets/css/app.css" rel="stylesheet">

となります。

ブラウザのキャッシュをバスト

通常のブラウザでは、HTMLで参照されるファイル名が同じであるとブラウザにキャッシュされます。キャッシュされること自体は転送時間を節約する意味で素晴らしいのですが、app.jsの中身が更新されたときはブラウザにキャッシュされているものを使用してもらいたくありません。

そのようなときに（つまりキャッシュをバストしたいとき）によく使われるのは、URLにPHP関数のtime()をURLに追加することです。

例えば、

<script src="{{ asset('js/app.js').'?'.time() }}" defer></script>

は、

<script src="https://example.com/assets/js/app.js?1570143025" defer></script>

となります。

毎回毎回アクセスする度に、time()の値は変わるのでapp.jsはキャッシュされず、ブラウザはファイルをサーバーから毎回毎回取得します。しかし、これだと困ります。app.jsが更新されるまではキャッシュして欲しいのです。

そこで登場するのが、larave-mixのバージョン機能です。

まず、webpack.mix.jsを編集します。

const mix = require('laravel-mix');                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
mix.js('resources/js/app.js', 'public/js')                                                                                                                                                                         
    .sass('resources/sass/app.scss', 'public/css');                                                                                                                                                                
                                                                                                                                                                                                                   
if (mix.inProduction()) {                                                                                                                                                                                          
    mix.version();                                                                                                                                                                                                 
}

追加したのは最後の3行です。プロダクションの実行のときにバージョン化を行う指定です。

次に、

$ npm run prod

を実行します。app.cssやapp.jsのファイルを生成するとともに、mix-manifest.jsonのファイルをpublicのディレクトリに作成します。

そのファイルの中身には、必要なファイルのバージョン化のためのマップが定義されています。

{
    "/js/app.js": "/js/app.js?id=d1c6ff581391a0e168f2",
    "/css/app.css": "/css/app.css?id=33e746eff21c53ed136b"
}

この情報を使用するには、mix()を使いレイアウトを以下のように編集します。

...
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
...
<link href="{{ asset(mix('css/app.css')) }}" rel="stylesheet">
...

出力は以下となります。

...
<script src="https://example.com/assets/js/app.js?id=d1c6ff581391a0e168f2" defer></script>
...
<link href="https://example.com/assets/css/app.css?id=33e746eff21c53ed136b" rel="stylesheet">
...

先のtime()とは違って、更新されたときのみにidの値が変わり、それまではブラウザにキャッシュされてもOKとなります。

laravel-mixでフロントエンドを開発

Mon, 30 Sep 2019 02:52:13 +0900

前回のコマンドラインでのnpm installの実行で、larave-mixのパッケージがインストールされました。今回はそれを利用して、実際にユーザーがブラウザを通して直接使用するapp.jsとapp.cssを作成します。

laravel-mixを使用したワークフロー

上のpublicのディレクトリに保存される、app.jsやapp.cssファイルの作成には以下の作業工程が必要となります。

１．ソースファイルを編集

resourcesディレクトリにおいて、jsやsassなどのビルドに必要なファイルを編集します。ここでは、ExampleComponent.vueのvuejsのコンポーネントもソースファイルの１つです。

２．webpack.mix.jsを編集

これは、ビルドの設計図です。laravel-mixが必要とするもので、webpackの実行に使います。以下は、プロジェクトのディフォルトでインストールされるwebpack.mix.jsの中身ですが、ソースファイルとそれから作成されるファイルの収納場所が記されています。

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

上はシンプルな設定ですが、sassのファイルをコンパイルしてcssファイルを作成し、jsファイルで使用するモジュールを１つのファイルのバンドルし、バベル化し最小化したり、複雑な作業をたくさん行います。バベル化とは、書いたjsのスクリプトがたとえ次世代のjavascriptの新機能でも、現在のブラウザでも使えるようにするようにトランスパイルすることです。

３．webpackを実行

webpackは、以下のコマンドで実行されます。

開発用には、

$ npm run dev

あるいは、ライブ用のために、

$ npm run prod

を実行してコンパイルします。devやprodの実行パラメータは、package.jsonで定義されています。以下の、scriptsのセクションを見てください。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
...

devは、developmentで、prodは、productionの短縮形ということがわかります。

また、それらのコマンドでは、webpackを実行して、laravel-mixが提供しているwebpack.config.jsの設定ファイルを使用していることもわかります。

laravel-mixのおかげで、複雑なwebpackの作業の設定が、先に掲載したwebpack.mix.jsに見られるようにたったの２行の設定となっています。感激です。

４．bladeファイルの編集

作成された、app.cssやapp.jsは、例えば、以下のようにレイアウトのbladeテンプレートで使用されます。

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
...

以上です。

Node.jsとnpm

Mon, 23 Sep 2019 09:34:17 +0900

Laravelは、いわゆるバックエンド、サーバーサイドのアプリケーションの開発のための使用が主なのですが、フロントエンドの開発にもlarave-mixを通してサポートしています。今回はそちら関連のコマンドやツールの備忘録です。こうたくさん実行するコマンドがあると、もう覚えられない年頃です。

Node.js

Node.jsの登場で、今までのHTMLに以下のようなcdnのリンクを入れてjavascriptで使用するやり方から、

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

以下のように、すべて自分のサイトで１つのcssやjsファイルに皆まとめてトランスパイルして最小化してしまうことが可能になりました。

<link rel="stylesheet" href="/assets/css/all.js">
<script src="/assets/js/all.js"></script>

しかし、そのために初めてjavascriptのコマンドラインでの開発環境が必要となりました。

Node.jsがあなたの環境にインストールされているかどうかは、

$ node -v
v12.4.0

インストールされているなら、nodeコマンドを実行してみてください。

$ node  
Welcome to Node.js v12.4.0.
Type ".help" for more information.
> x = 1
1
> y = 2
2
> x + y
3
>

とtinkerみたいに対話式で実行できます。これは役に立ちそうです。いちいちhtmlにスクリプトにconsole.log()を入れてブラウザでデバッグしていた時代から抜けられるかな。

npm

php言語において、composerというパッケージ管理のツールがあるように、Node.jsでは、npmというパッケージマネージャーがあります。npmがインストールされているかは、以下でチェックします。、

$ npm -v
6.10.2

composer create-projectでLaraveの新規のプロジェクトを作成したら、composer.jsonの情報をもとに、

$ composer install

が自動的に実行されて、vendorのディレクトリにすべての必要なphpのパッケージがダウンロードされて収納されます。

それと同様に、

$ npm install

を実行すると、今度は、package.jsonの情報ををもとにnode_modulesのディレクトリにすべての必要なNode.jsのパッケージがダウンロードされます。

どのパッケージがインストールされたかは、composerでは以下のコマンドでチェックできます。

$ composer show
beyondcode/laravel-dump-server        1.3.0    Symfony Var-Dump Server for Laravel
dnoegel/php-xdg-base-dir              0.1      implementation of xdg base directory specification for php
doctrine/inflector                    v1.3.0   Common String Manipulations with regard to casing and singular/plural rules.
doctrine/instantiator                 1.2.0    A small, lightweight utility to instantiate objects in PHP without invoking their constructors
doctrine/lexer                        1.1.0    PHP Doctrine Lexer parser library that can be used in Top-Down, Recursive Descent Parsers.
dragonmantank/cron-expression         v2.3.0   CRON for PHP: Calculate the next or previous run date and determine if a CRON expression is due
egulias/email-validator               2.1.11   A library for validating emails against several RFCs
erusev/parsedown                      1.7.3    Parser for Markdown.
fideloper/proxy                       4.2.1    Set trusted proxies for Laravel
filp/whoops                           2.5.0    php error handling for cool kids
fzaninotto/faker                      v1.8.0   Faker is a PHP library that generates fake data for you.
hamcrest/hamcrest-php                 v2.0.0   This is the PHP port of Hamcrest Matchers
jakub-onderka/php-console-color       v0.2    
jakub-onderka/php-console-highlighter v0.4     Highlight PHP code in terminal
laravel/framework                     v5.8.35  The Laravel Framework.
...

同様に、npmでは、

$ npm list
/vol1/usr/www/repos/repos/l58
├─┬ axios@0.19.0
│ ├─┬ follow-redirects@1.5.10
│ │ └─┬ debug@3.1.0
│ │   └── ms@2.0.0
│ └── is-buffer@2.0.3
├── bootstrap@4.3.1
├─┬ cross-env@5.2.1
│ └─┬ cross-spawn@6.0.5
│   ├── nice-try@1.0.5
│   ├── path-key@2.0.1
│   ├── semver@5.7.1
│   ├─┬ shebang-command@1.2.0
│   │ └── shebang-regex@1.0.0
│   └─┬ which@1.3.1
│     └── isexe@2.0.0
├── jquery@3.4.1
├─┬ laravel-mix@4.1.4
...

依存するパッケージが階層で表示されているのでたくさんの表示になってしまいます。–depth 0を付けたら第一階層のみ表示できます。

$ npm list --depth 0
/vol1/usr/www/repos/repos/l58
├── axios@0.19.0
├── bootstrap@4.3.1
├── cross-env@5.2.1
├── jquery@3.4.1
├── laravel-mix@4.1.4
├── lodash@4.17.15
├── popper.js@1.15.0
├── resolve-url-loader@2.3.2
├── sass@1.22.12
├── sass-loader@7.3.1
└── vue@2.6.10

Laravel-Mix on ララジャパン

光速のVite

Viteが採用された理由

Laravel-Mixの問題点

Viteはノーバンドル

Viteを体感してみる

本番用にはバンドルする

まとめ

app.jsとbootstrap.js

jsやcssファイルのバージョン化

asset()

ブラウザのキャッシュをバスト

laravel-mixでフロントエンドを開発

関連するディレクトリやファイル

laravel-mixを使用したワークフロー

１．ソースファイルを編集

２．webpack.mix.jsを編集

３．webpackを実行

４．bladeファイルの編集

Node.jsとnpm

Node.js

npm