mindplay/php-vite

为 Vite 前端构建工具提供的轻量级 PHP 后端集成

维护者

详细信息

github.com/mindplay-dk/php-vite

源代码

问题

安装次数: 3,690

依赖者: 0

建议者: 0

安全性: 0

星星: 21

关注者: 2

分支: 2

开放问题: 0

1.0.0 2024-05-07 10:03 UTC

Requires

  • php: >=8.1

Requires (Dev)

MS-RL 1b1435062dec763885ed42be6daf7007a557b7df

This package is auto-updated.

Last update: 2024-08-24 17:09:26 UTC

README

PHP Version Build Status License

此库为基于 Vite 的 PHP 基础的 MPA、SPA 或 PWA 提供轻量级后端集成。

它解析 构建清单（即 .vite/manifest.json 文件），并生成所需的 <script> 和 <link> 标签来加载（和预加载）脚本、CSS 文件和其他资源。

基本用法

一个带有注释的 MPA 示例可在此处找到 这里 - 请参考此处的 Vite、NPM、TypeScript 和 Composer 的配置示例。

在以下步骤中，我们将仅介绍库 API 的使用。

1. 加载 Vite 生成的 manifest.json 文件

$vite = new Manifest(
    manifest_path: $your_root_dir . '/public/dist/.vite/manifest.json',
    base_path: '/dist/',
    dev: false
);

manifest_path 指向为生产构建创建的 Vite manifest.json 文件。

在此示例中，dev 为 false，因此我们将创建生产资产的标签。

base_path 相对于您的公共网站根目录 - 它是 Vite 生产资源提供服务的根文件夹，以及/或 Vite 在开发模式下动态提供资源的根文件夹。

注意，在开发模式下（当 dev 设置为 true 时）不使用 manifest.json 文件，也不需要它。

💡 有关构造函数参数的详细描述，请参阅 Manifest 构造函数参数 doc-blocks。

2. 为入口点脚本创建 Tags

$tags = $vite->createTags("index.ts");

您的入口点脚本在 Vite 的 build.rollupOptions 中定义，使用 RollUp 的 input 设置。

请注意，如果您在同一页面上有多个入口点脚本，您应通过一个 单一 调用传递它们 - 例如

$tags = $vite->createTags("index.ts", "consent-banner.ts");

为不同的入口点进行多次调用 可能 导致任何共享静态导入的标签重复 - 您可能只需要单个页面上的一个 Tags 实例。

3. 在 HTML 模板中从 Tags 发射

您的 Tags 实例包含预加载和 CSS 标签，这些标签应在您的 <head> 标签中发射，以及 js 标签，这些标签应立即在 </body> 结束标签之前发射。

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vite App</title>
    <link rel="icon" href="<?= $vite->getURL("php.svg") ?>" />
    <?= $tags->preload ?>
    <?= $tags->css ?>
</head>
<body>
    <div id="app"></div>
    <?= $tags->js ?>
</body>
</html>

预加载资源

默认情况下，该服务通过预加载任何静态导入的脚本和 CSS 文件。

此外，您还可以配置它以预加载其他静态导入的资源 - 为了方便起见，有两个方法可以自动配置预加载所有常见的图像和字体资产类型

$manifest->preloadImages();
$manifest->preloadFonts();

您还可以配置它以预加载其他任何类型的资产 - 例如，要配置预加载 .json 资产，您可以添加以下内容

$manifest->preload(
    ext: "json",
    mime_type: "application/json",
    preload_as: "fetch"
);

然后根据上述文档创建您的标签。

创建 URL

对于高级用例，您还可以直接获取 Vite 发布的资源的 URL

$my_url = $manifest->getURL("consent-banner.ts");

您可以使用此功能，例如

  • 创建自己的自定义预加载标签（例如，使用媒体查询）
  • 根据用户交互或用户状态等条件加载脚本。