feat: Viteの開発サーバーURLとmanifest.jsonのパスを自動検出する機能を追加

appleple · Jun 6, 2024 · 5f62bb2 · 5f62bb2
1 parent a084c1f
commit 5f62bb2
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 69 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -76,22 +76,20 @@ head タグ内 `@vite()` を追加します。
 </head>
 ```
 
-次に、a-blog cms 設置ディレクトリにある .env ファイルに以下の設定を追加します。
+これで、Vite の開発サーバーからビルドされたアセットが読み込まれるようになります。
+
+### 本番環境での利用
+
+Vite で本番環境用ビルドしたアセットを読み込めるようにするためには、a-blog cms 設置ディレクトリにある .env ファイルを編集します。
+
+以下のように `VITE_ENVIRONMENT` に `production` を指定します。
 
 ```
 # Vite
 VITE_ENVIRONMENT=production # development | production
-VITE_MANIFEST_PATH=dist/.vite/manifest.json
-VITE_DEV_SERVER_URL=http://localhost:5173
 ```
 
-以下、環境変数の説明です。
-
-| 変数名               | 説明                                                                 |
-|---------------------|----------------------------------------------------------------------|
-| `VITE_ENVIRONMENT`  | `development` または `production` を指定します。`development` の場合、Vite の開発サーバーを利用し、`production` の場合はビルドされたアセットを利用します。 |
-| `VITE_MANIFEST_PATH`| `manifest.json` のパスを利用しているテーマディレクトリから指定します。                    |
-| `VITE_DEV_SERVER_URL`| Vite の開発サーバーの URL を指定します。                               |
+これで、Vite で本番環境用ビルドしたアセットが読み込まれるようになります。
 
 
 ## 設定
@@ -134,10 +132,8 @@ export default defineConfig({
 <!DOCTYPE html>
 <head>
   @vite('src/js/main.js', {
-    "entrypointAttribute": {
-      "script": {
-        "async": true
-      }
+    "scriptTagAttributes": {
+      "async": true
     }
   })
 </head>
@@ -150,10 +146,8 @@ export default defineConfig({
 <!DOCTYPE html>
 <head>
   @vite('src/js/main.js', {
-    "entrypointAttribute": {
-      "link": {
-        "type": "text/css"
-      }
+    "linkTagAttributes": {
+      "type": "text/css"
     }
   })
 </head>
@@ -189,5 +183,17 @@ React と `@vitejs/plugin-react` を利用する場合、既存の `@vite` と
 
 | グローバル変数名               | 説明                                                                 |
 |---------------------|----------------------------------------------------------------------|
-| `%{VITE_ENVIRONMENT}`  | .env で設定した `VITE_ENVIRONMENT` の値（`development` または `production`）です。`development` の場合、Vite の開発サーバーを利用し、`production` の場合はビルドされたアセットを利用します。 |
-| `%{VITE_DEV_SERVER_URL}`| .env で設定した `VITE_ENVIRONMENT` の値です。Vite の開発サーバーの URL を出力します。                               |
+| `%{VITE_ENVIRONMENT}`  | 現在の Vite の動作モードの値を出力します（`development` または `production`）です。`development` の場合、Vite の開発サーバーを利用し、`production` の場合はビルドされたアセットを利用します。 |
+| `%{VITE_DEV_SERVER_URL}`| Vite 開発サーバーのURLを出力します。Vite の開発サーバーの URL を出力します。                               |
+
+## 高度なカスタマイズ
+
+環境変数を利用して、Vite の設定をカスタマイズすることができます。
+
+以下、環境変数の説明です。
+
+| 変数名               | 説明                                                                 |
+|---------------------|----------------------------------------------------------------------|
+| `VITE_ENVIRONMENT`  | `development` または `production` を指定します。`development` の場合、Vite の開発サーバーを利用し、`production` の場合はビルドされたアセットを利用します。 |
+| `VITE_MANIFEST_PATH`| `manifest.json` のパスを利用しているテーマディレクトリから指定します。                    |
+| `VITE_DEV_SERVER_URL`| Vite の開発サーバーの URL を指定します。                               |
diff --git a/src/Exceptions/ManifestNotFoundException.php b/src/Exceptions/ManifestNotFoundException.php
@@ -0,0 +1,12 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Acms\Plugins\Vite\Exceptions;
+
+/**
+ * Exception thrown when vite manifest.json file is not found.
+ */
+class ManifestNotFoundException extends \Exception
+{
+}
diff --git a/src/Hook.php b/src/Hook.php
@@ -1,11 +1,23 @@
 <?php
 
+declare(strict_types=1);
+
 namespace Acms\Plugins\Vite;
 
 use Acms\Services\Facades\Application;
 
 class Hook
 {
+    /**
+     * @var Vite
+     */
+    private $vite;
+
+    public function __construct()
+    {
+        $this->vite = Application::make('vite.helper');
+    }
+
     /**
      * 例: グローバル変数の拡張
      *
@@ -14,8 +26,8 @@ class Hook
      */
     public function extendsGlobalVars(\Field &$globalVars): void
     {
-        $globalVars->set('VITE_ENVIRONMENT', env('VITE_ENVIRONMENT', 'development'));
-        $globalVars->set('VITE_DEV_SERVER_URL', env('VITE_DEV_SERVER_URL'));
+        $globalVars->set('VITE_ENVIRONMENT', $this->vite->getEnvironment());
+        $globalVars->set('VITE_DEV_SERVER_URL', $this->vite->getDevServerUrl());
     }
 
     /**
@@ -37,10 +49,9 @@ public function beforeBuild(&$tpl)
      */
     private function resolveVite(string $string): string
     {
-        $vite = Application::make('vite.helper');
         $string = (string)preg_replace(
             "/@viteReactRefresh/",
-            $vite->generateReactRefreshHtml(),
+            $this->vite->generateReactRefreshHtml(),
             $string
         );
         $string = preg_replace(
@@ -50,7 +61,7 @@ private function resolveVite(string $string): string
         );
         $regex = '/@vite\(\s*(\[(?:"[^"]*"|\'[^\']*\')(?:\s*,\s*(?:"[^"]*"|\'[^\']*\'))*\]|(?:"[^"]*"|\'[^\']*\'))\s*(?:,\s*(\{[^\)]+\}))?\s*\)/u'; // phpcs:ignore
 
-        return (string)preg_replace_callback($regex, function ($matches) use ($vite) {
+        return (string)preg_replace_callback($regex, function ($matches) {
             // エントリーポイントの解析
             $entrypoints = $matches[1];
             if (substr($entrypoints, 0, 1) === '[') {
@@ -68,7 +79,7 @@ function ($entrypoint) {
             }
             // オプションの解析
             $options = isset($matches[2]) ? json_decode($matches[2], true) : [];
-            $html = resolvePath($vite->generateHtml($entrypoints, $options), config('theme'), '/');
+            $html = resolvePath($this->vite->generateHtml($entrypoints, $options), config('theme'), '/');
             return $html;
         }, $string);
     }

diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php
@@ -1,5 +1,7 @@
 <?php
 
+declare(strict_types=1);
+
 namespace Acms\Plugins\Vite;
 
 use ACMS_App;