README

Vite Manifest 用于 PHP & Twig 模板。允许在 PHP & Twig 模板中集成 Vite manifest，无需使用 Symfony。针对 PHP-DI 风格容器优化。

灵感来源于 kellerkinderDE/vite-encore-bundle 和 PHP-Vite。

安装

composer require userfrosting/vite-php-twig

文档 & 使用方法

使用独立版本

$manifest = new ViteManifest('.vite/manifest.json');

// Get files for `views/foo.js` entry
$manifest->getScripts('views/foo.js'); // Scripts
$manifest->getStyles('views/foo.js'); // Style
$manifest->getImports('views/foo.js'); // Preload

// Render HTML tags for `views/foo.js` entry
$manifest->renderScripts('views/foo.js'); // Scripts
$manifest->renderStyles('views/foo.js'); // Style
$manifest->renderPreloads('views/foo.js'); // Preload

// If you have multiple entry point scripts on the same page, you should pass them in a single call to avoid duplicates - for example:
$manifest->getScripts('views/foo.js', 'views/bar.js');

ViteManifest 实现 \UserFrosting\ViteTwig\ViteManifestInterface，如果您喜欢对接口进行类型提示，以便用于依赖注入。

与 Twig 一起使用

需要 Twig 3 或更高版本

Vite 编写一个包含每个 "entry" 所需所有文件的 manifest.json 文件。要在 Twig 中引用条目，需要将 ViteTwigExtension 扩展添加到 Twig 环境。该扩展接受一个 ViteManifest，它本身接受 manifest.json 的路径，

use UserFrosting\ViteTwig\ViteManifest;
use Twig\Environment;
use Twig\Loader\FilesystemLoader;

$manifest = new ViteManifest('.vite/manifest.json');
$extension = new ViteTwigExtension($manifest);

// Create Twig Environment and add extension
$loader = new FilesystemLoader('./path/to/templates');
$twig = new Environment($loader);
$twig->addExtension($extension);

现在，要渲染特定 "entry"（例如 entry1）的所有 script 和 link 标签，您可以

{{ vite_js('views/foo.js') }}
{{ vite_css('views/foo.js') }}
{{ vite_preload('views/foo.js') }}

如果您在同一页面上有多个入口点脚本，您应该在单个调用中传递它们以避免重复 - 例如

{{ vite_js('views/foo.js', 'views/bar.js') }}

Vite 默认端口

默认情况下，vite 将使用端口 5173。但是，如果端口已被占用，Vite 将自动尝试下一个可用的端口，因此这可能不是服务器最终监听的端口。由于 PHP 应用程序不知道 vite 使用哪个端口，因此可以在项目根目录中的 vite.config.js 文件中强制使用端口，使用 server.strictPort 和 server.port

server: {
    strictPort: true,
    port: 3000,
},

有关如何配置 Vite 的更多信息，请参阅官方文档。

ViteManifest 选项

$manifest = new ViteManifest(
    manifestPath: '.vite/manifest.json',
    basePath: 'dist/',
    serverUrl: 'http://[::1]:5173/',
    devEnabled: true,
)

manifestPath - 字符串

指向为生产构建创建的 Vite manifest.json 文件。如果您使用开发服务器，则为可选。

basePath - 字符串

从其中服务 Vite 发布资产的公共基础路径。资产路径将相对于您的 vite 配置中的 outDir。它也可以指向 CDN 或其他资产服务器，如果您从不同的域服务资产。

serverUrl - 字符串

包含端口的 vite 服务器 URL。如果使用，可以指定非默认端口。

devEnabled - 布尔值

指示应用程序是否在开发模式下运行（即使用 vite 服务器）。默认为 false。

userfrosting / vite-php-twig

维护者

详细信息