次世代フロントエンドツール「Vite」を a-blog cms で利用するためのコツ

2023年12月24日

この記事は公開日より1年以上経過しているため、現在の内容と異なる可能性があります。

Vite（ヴィート）

この記事は Advent Calendar 2023 の24日目の記事となります。a-blog cms にまつわる25日分の記事が公開されていますので、是非ご覧ください。 https://adventar.org/calendars/8651

a-blog cms のテーマのビルド環境

a-blog cms 標準テーマのビルド環境は、これまで「webpack」を利用してビルドされていました。パッケージに入っている「omake」ディレクトリ内にある、ビルド系ファイルを自分のテーマに持ってくることで、webpack環境を利用できるようになっておりまます。ただ近年は「webpack」以外にもモダンなビルドツールが出てきましたので、今回は「Vite」というツールについてa-blog cmsで使用するためのコツを紹介したいと思います。

omakeディレクトリにあるビルド系ファイル

Viteとは？

公式サイト（https://ja.vitejs.dev/）

詳しくは公式サイトをご覧ください。従来のビルドツールに比べ、パフォーマンスに特化しているツールになっています。

この記事では、Viteの使い方や設定方法にはフォーカスせず、a-blog cms で利用する場合の設定方法やコツをご紹介します。

バックエンドとの統合

a-blog cmsのようにバックエンドがHTMLを配信するシステムの場合、少し工夫が必要です。 WordPressや、Rails、Laravelのような有名CMS・ライブラリの場合、プラグインが用意されておりプラグインを導入することにより、Viteとの統合が出来るようになっております。

公式サイト「バックエンドの統合」

a-blog cms で Viteを利用できるようにする

a-blog cms で Viteを利用できるようにします。まずは「vite.config.js」を調整します。

「build」オプションで、「manifest」を「true」に設定し、「input」でエントリーポイントとなるjs（themes/xxxx/src/js/main.js）を指定します。

build: {
  manifest: true, // dist に manifest.json を出力
  rollupOptions: {
    input: {
      bundle: resolve(__dirname, 'src/js/main.js'),
    },
  },
},

この設定をすることで、manifest.jsonにビルドされたアセットのパスが出力されるようになります。

manifest.jsonの例

{
  "main.js": {
    "file": "assets/main.4889e940.js",
    "src": "main.js",
    "isEntry": true,
    "dynamicImports": ["views/foo.js"],
    "css": ["assets/main.b82dbe22.css"],
    "assets": ["assets/asset.0ab0f9cd.png"]
  },
  "views/foo.js": {
    "file": "assets/foo.869aea0d.js",
    "src": "views/foo.js",
    "isDynamicEntry": true,
    "imports": ["_shared.83069a53.js"]
  },
  "_shared.83069a53.js": {
    "file": "assets/shared.83069a53.js"
  }
}

この書き出された「manifest.json」の情報を使って、JSをHTMLに読み込みます。

専用モジュールの用意

上記で出力された「manifest.json」の情報をHTMLに出力するためのモジュールを作成します。

「extension/acms/GET/Vite.php」を作成して、以下コードを貼り付けてください。

<?php

namespace Acms\Custom\GET;

use ACMS_GET_Json_2Tpl;
use Template;
use ACMS_Corrector;

class Vite extends ACMS_GET_Json_2Tpl
{
    public function get()
    {
        $tpl = new Template($this->tpl, new ACMS_Corrector());

        try {
            if (isset($_ENV['VITE_MODE']) && $_ENV['VITE_MODE'] === 'develop') {
                $vars['localhost'] = isset($_ENV['VITE_LOCALHOST']) ? $_ENV['VITE_LOCALHOST'] : 'http://localhost:5173';
            } else {
                $json = $this->getManifest('themes/'.$_ENV['VITE_BUILD_THEME'].'/dist/manifest.json');
                $vars = json_decode($json, true);
                if (is_array($vars) && $this->is_vector($vars)) {
                    $vars = [
                        'root' => $vars,
                    ];
                }
            }
            if (is_array($vars)) {
                return $tpl->render($vars);
            }
        } catch (\Exception $e) {
            if (DEBUG_MODE) {
                throw $e;
            }
        }
        return '';
    }

    protected function env($key, $default = '') {
        return isset($_ENV[$key]) ? $_ENV[$key] : $default;
    }

    protected function getManifest($path)
    {
        try {
            $manifest = @file_get_contents($path);
            if (empty($manifest)) {
                throw new \RuntimeException('Empty Manifest.');
            }
        } catch ( \Exception $e ) {
            return '';
        }
        return $manifest;
    }
}

HTMLテンプレートの修正

モジュールが作成できたら、JSを読み込むインクルードファイルを修正します。以下のように作成したモジュールを使って読み込んでください。

ポイントは、で、ここは vite.config.js で指定したエントリポイントに合わせて変更ください。

<!-- BEGIN_MODULE Vite -->

<!-- BEGIN src/js/main.js -->
<script type="module" src="/dist/{file}" async></script>
<!-- END src/js/main.js -->

<!-- BEGIN develop -->
<script type="module" src="{localhost}/@vite/client"></script>
<script type="module" src="{localhost}/src/js/main.js"></script>
<!-- END develop -->

<!-- END_MODULE Vite -->

.envファイルの修正

.envファイルに以下を追記してください。

VITE_MODE=develop # develop | production
VITE_LOCALHOST=http://localhost:5173 # http://localhost:5173
VITE_BUILD_THEME=hoge # ビルド対象テーマを指定します

使用方法

ここまでで下準備は完了です。使い方ですが本番用ビルドをする場合と、開発ビルドを行う場合の２通りがあります。普段開発するときは開発ビルドを行いファイル保存と同時にビルドが走らせてスムーズな開発を行います。本番環境にアップロードする場合は本番用のビルドを行います。

開発ビルド

「vite」コマンドを実行すると開発サーバーが立ち上がり、カーカルURLが表示されます。このURLを覚えていてください。

  VITE v4.4.7  ready in 523 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

次に、「.env」ファイルを修正します。

VITE_MODE=develop # developを指定
VITE_LOCALHOST=http://localhost:5173 # 先ほど覚えたURLを指定
VITE_BUILD_THEME=yomeruba-v2 # ビルド対象テーマを指定します

以上で、a-blog cms と Vite によるアセット配信が統合されるようになります。

本番用ビルド

「vite build --mode=production」コマンドを実行するとプロダクションビルドを行えます。プロダクションビルドされたファイルを反映する本番環境の「.env」ファイルを以下のように修正します。

VITE_MODE=production # productionを指定
VITE_LOCALHOST=http://localhost:5173 # 適当な値で大丈夫です
VITE_BUILD_THEME=hoge # ビルド対象テーマを指定します

以上で、a-blog cms と Vite によるアセット配信が統合されるようになります。

以上となります。

フロントエンドツールを使っている方はぜひ試してみてください。

次世代フロントエンドツール「Vite」を a-blog cms で利用するためのコツ

a-blog cms のテーマのビルド環境

Viteとは？

バックエンドとの統合

a-blog cms で Viteを利用できるようにする

専用モジュールの用意

HTMLテンプレートの修正

.envファイルの修正

使用方法

開発ビルド

本番用ビルド

同じタグ付けがされている記事

カテゴリー

a-blog cms の テーマのビルド環境

Viteとは？

バックエンドとの統合

a-blog cms で Viteを利用できるようにする

専用モジュールの用意

HTMLテンプレートの修正

.envファイルの修正

使用方法

開発ビルド

本番用ビルド

同じタグ付けがされている記事

カテゴリー

a-blog cms のテーマのビルド環境