{"id":19623814,"url":"https://github.com/appleple/acms-vite","last_synced_at":"2026-05-15T04:05:38.478Z","repository":{"id":242816378,"uuid":"810648112","full_name":"appleple/acms-vite","owner":"appleple","description":"a-blog cms でViteを利用するための拡張アプリです。","archived":false,"fork":false,"pushed_at":"2024-09-05T11:47:23.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-26T19:39:06.944Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appleple.png","metadata":{"files":{"readme":"docs/README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-05T05:27:09.000Z","updated_at":"2024-09-05T11:47:23.000Z","dependencies_parsed_at":"2024-06-05T06:40:31.025Z","dependency_job_id":"d93edba2-c4ac-498b-97e0-5060bd058800","html_url":"https://github.com/appleple/acms-vite","commit_stats":null,"previous_names":["appleple/acms-vite"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/appleple/acms-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appleple","download_url":"https://codeload.github.com/appleple/acms-vite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33053161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-15T02:00:06.351Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T11:35:36.800Z","updated_at":"2026-05-15T04:05:38.472Z","avatar_url":"https://github.com/appleple.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# acms-vite\n\na-blog cms でViteを利用するための拡張アプリです。\n\n## 動作条件\n\n* php 7.3 以上\n* a-blog cms Ver. 3.1.0 以上\n\n## ダウンロード\n\n[Vite for a-blog cms](https://github.com/appleple/acms-vite/raw/master/build/Vite.zip)\n\n## インストール\n\n1. ダウンロードしたファイルを解凍し、`Vite` ディレクトリを a-blog cms の `extensions` ディレクトリに配置します。\n2. 管理画面にログインし、`拡張アプリ管理` から `Vite` をインストールします。\n\n### 注意\n\nconfig.server.php で HOOK_ENABLE を有効にしておく必要があります。\n\n```php\ndefine('HOOK_ENABLE', 1);\n```\n\n## 使い方\n\na-blog cms で Vite を利用してバンドルしたファイルを読み込むためには、[バックエンドとの統合](https://vitejs.dev/guide/backend-integration)で記載されている仕様に合わせて、script タグや link タグを出力する必要があります。\n\n本拡張アプリを利用することで、Vite の仕様に合わせてタグを出力することができるようになり、a-blog cms のテンプレート内で簡単に Vite を利用することができます。\n\n### Vite の設定\n\nVite の設定は `vite.config.js` に記述します。詳細は [Vite のドキュメント](https://vitejs.dev/config/) を参照してください。\n\n`build.manifest` を `true` に設定し、`rollupOptions.input` でエントリーポイントとなるファイルを指定します。\n以下のサンプルは、`themes/利用テーマ/src/js/main.js` をエントリーポイントとして指定しています。\n\n```js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n    // ...\n    build: {\n        manifest: true,\n        rollupOptions: {\n            input: {\n                bundle: resolve(__dirname, 'src/js/main.js'),\n            },\n        },\n    },\n});\n```\n\nこの設定をすることで、manifest.json にビルドされたアセットのパスが出力されるようになります。\n\n### スクリプトとスタイルの読み込み\n\nVite の設定が完了したら、a-blog cms のテンプレート内にスクリプトとスタイルを読み込むための記述を追加します。\nhead タグ内 `@vite()` を追加します。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  @vite('src/js/main.js')\n\u003c/head\u003e\n```\n\n複数のエントリーポイントを指定する場合は、配列で指定します。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  @vite(['src/js/main.js', 'src/js/main.css'])\n\u003c/head\u003e\n```\n\nこれで、Vite の開発サーバーからビルドされたアセットが読み込まれるようになります。\n\n### 本番環境での利用\n\nVite で本番環境用ビルドしたアセットを読み込めるようにするためには、a-blog cms 設置ディレクトリにある .env ファイルを編集します。\n\n以下のように `VITE_ENVIRONMENT` に `production` を指定します。\n\n```\n# Vite\nVITE_ENVIRONMENT=production # development | production\n```\n\nこれで、Vite で本番環境用ビルドしたアセットが読み込まれるようになります。\n\n\n## 設定\n\n`@vite()` の第2引数にJSON形式でオプションを指定することができます。\n\n### 出力ディレクトリの設定\n\n例えば、Vite の設定で `build.outDir` を `bundle` に設定している場合、以下のように記述します。\n\n```js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n    // ...\n    build: {\n        outDir: 'bundle',\n    },\n});\n```\n\n`@vite()` の第2引数に出力ディレクトリを指定します。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  @vite('src/js/main.js', {\n    outDir: 'bundle'\n  })\n\u003c/head\u003e\n```\n\n### タグの属性をカスタマイズする\n\nタグの属性をカスタマイズすることができます。\n\n以下の例では、エントリーポイントから出力された script タグに `async` 属性を追加しています。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  @vite('src/js/main.js', {\n    \"scriptTagAttributes\": {\n      \"async\": true\n    }\n  })\n\u003c/head\u003e\n```\n\nまた、link タグの属性もカスタマイズすることができます。\n以下の例では、エントリーポイントから出力された link タグに `type=\"text/css\"` 属性を追加しています。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  @vite('src/styles/main.css', {\n    \"linkTagAttributes\": {\n      \"type\": \"text/css\"\n    }\n  })\n\u003c/head\u003e\n```\n\n## React の利用\n\nReact と `@vitejs/plugin-react` を利用する場合、既存の `@vite` と一緒に、追加で `@viteReactRefresh` を追加する必要があります。\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  @viteReactRefresh\n  @vite('src/js/main.jsx')\n\u003c/head\u003e\n```\n\n`@viteReactRefresh` は、React の Hot Module Replacement を有効にするためのスクリプトを出力します。\n\n```html\n\u003cscript type=\"module\"\u003e\n  import RefreshRuntime from 'http://localhost:5173/@react-refresh'\n  RefreshRuntime.injectIntoGlobalHook(window)\n  window.$RefreshReg$ = () =\u003e {}\n  window.$RefreshSig$ = () =\u003e (type) =\u003e type\n  window.__vite_plugin_react_preamble_installed__ = true\n\u003c/script\u003e\n```\n\n## グローバル変数\n\n本拡張アプリをインストールすることで、以下のグローバル変数が利用できるようになります。\n\n| グローバル変数名               | 説明                                                                 |\n|---------------------|----------------------------------------------------------------------|\n| `%{VITE_ENVIRONMENT}`  | 現在の Vite の動作モードの値を出力します（`development` または `production`）です。`development` の場合、Vite の開発サーバーを利用し、`production` の場合はビルドされたアセットを利用します。 |\n| `%{VITE_DEV_SERVER_URL}`| Vite 開発サーバーのURLを出力します。Vite の開発サーバーの URL を出力します。                               |\n\n## 高度なカスタマイズ\n\n環境変数を利用して、Vite の設定をカスタマイズすることができます。\n\na-blog cms設置ディレクトリにある .env ファイルを編集することで環境変数を設定します。\n\n```\n# Vite\nVITE_ENVIRONMENT=production # development | production\nVITE_MANIFEST_PATH=dist/.vite/manifest.json\nVITE_DEV_SERVER_URL=http://localhost:5173\n```\n\n以下、環境変数の説明です。\n\n| 変数名               | 説明                                                                 |\n|---------------------|----------------------------------------------------------------------|\n| `VITE_ENVIRONMENT`  | `development` または `production` を指定します。`development` の場合、Vite の開発サーバーを利用し、`production` の場合はビルドされたアセットを利用します。 |\n| `VITE_MANIFEST_PATH`| `manifest.json` のパスを利用しているテーマディレクトリから指定します。                    |\n| `VITE_DEV_SERVER_URL`| Vite の開発サーバーの URL を指定します。                               |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Facms-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappleple%2Facms-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Facms-vite/lists"}