README

💿 composer require viaaurea/vitte

Vite 桥接 Latte 模板（Nette）。

🇸🇰/🇨🇿 斯洛伐克 / 捷克版本说明

在 Latte 中的使用

  {vite main.js}
  <div id="app" />

支持 Vite 的 开发服务器 和 Vite 生成的 捆绑包。

与 Nette 的集成

使用 ViteLatteInstaller 装饰 Latte\Engine

# any.neon (Nette)
services:
    vite:
        class:          VA\Vitte\ViteNetteBridge
        arguments:
            path:       assets/vite-bundle              # Relative path from www dir to the manifest file
            manifest:   manifest.json                   # manifest file name
            tempFile:   vite.php                        # Each vite bundle must have a dedicated cache file.
            devUrl:     %system.vite.url%               # Default is 'https://:5173'
            strict:     yes                             # You may want to turn strict mode on in development only
            basePath:   @http.paths::getBasePath()
            wwwDir:     %wwwDir%
            tempDir:    %tempDir%

decorator:
  Latte\Engine:
    setup:
      - VA\Vitte\ViteLatteInstaller()::bundle(
          @vite::makePassiveEntryLocator(
            %system.vite.development%                   # When on, serves links to Vite dev-server only
          )
        )::install(@self)

然后 {vite} 宏在模板中可用

  {vite src/main.js}
  <div id="app" />

宏的名称是可配置的。

根据 %system.vite.development% 变量（将其替换为您所使用的任何内容），宏产生生产或开发标签

<!-- PRODUCTION -->
<script type="module" src="/placeholder/assets/main.cf1f50e2.js"></script>
<script type="module" src="/placeholder/assets/vendor.5f8262d6.js"></script>
<link rel="stylesheet" href="/placeholder/assets/main.c9fc69a7.css" />

<!-- DEVELOPMENT -->
<script type="module" src="https://:5173/@vite/client"></script>
<script type="module" src="https://:5173/src/main.js"></script>

Vite 配置

Vite（《vite.config.js》）必须配置以正确集成

• build.manifest 必须设置为 true
• build.rollupOptions.input 应指向 main.js（或其他 JS 入口点）

解释 和更多信息可以在这里找到

• 👉 PHP-Vite 桥接构建工具（Peat）
• 官方 Vite 文档.

💡

您可能还想将 build.outDir 设置为指向后端公共目录的子目录，这样您就不必在每次构建后手动移动构建文件。

兼容性

兼容 Vite 版本 v2，v3，v4 及以上。

请注意，自 Vite v3 以来，开发服务器的默认端口已从 v2 中使用的 3000 更改为 5173。

缓存预热

将其作为构建步骤运行

<?php

declare(strict_types=1);

use VA\Vitte\ViteNetteBridge;

/**
 * This script pre-generates a cache file for Vite integration.
 * Improves performance by including a PHP file instead of parsing the JSON manifest. Useful in production environments.
 */
(function () {
    $root = __DIR__ . '/../';

    /* @var $container DI\Container */
    $container = require_once $root . 'app/bootstrap.php';

    echo "Vite cache warmup: "; // echo after the container has been populated

    /** @var ViteNetteBridge $vite */
    $vite = $container->get('vite');
    $vite->populateCache();

    echo "ok\n";
})();

多个捆绑包

Vitte 支持多个 Vite 捆绑包（例如，结合 React 和 Vue 捆绑包），请参阅 ViteLatteInstaller::bundle() 方法。

使用方法

  {vite src/main.js vue-bundle}
  {vite src/main.js react-bundle}

请注意，您需要为每个捆绑包调用 ViteLatteInstaller::bundle，如下所示
ViteLatteInstaller::bundle(..., 'vue-bundle')::install(@self)