README

帮助 Vite 生成的应用程序与 Twig 集成，不多也不少（"Vite fait, bien fait"）。

基本用法

安装它，
创建一个或多个 Vite 应用程序，或者一个具有多个入口点的单个应用程序（实际上，您的架构或方法无关紧要），
为每个应用程序复制或设置输出构建路径，每个应用程序在自己的目录下，位于 Symfony 的 public/ 目录中，
在此捆绑包配置中注册每个应用程序的 manifest.json 文件，
在需要它的页面中使用 {{ vite_head('app_name') }} 和 {{ vite_body('app_name') }}。

Twig 函数具有意见性，并将应用程序作为 JavaScript 模块包含在内。

如果您的内核当前环境是 dev，则它将包含指向开发服务器的链接。为了使其正常工作，您需要运行 Vite。

包没有指定 Symfony 依赖项或版本约束。从理论上讲，它应该与任何 6.0 和 7.0 版本兼容。

设置

安装它

简单

composer require makinacorpus/vite-bundle

然后将其添加到您的 config/bundles.php 文件中

<?php

return [
    // ... your other bundles.
    MakinaCorpus\ViteBundle\ViteBundle::class => ['all' => true],
];

除了以下文档中记录的 Vite 应用程序注册之外，没有具体的配置。每一步都很重要，请花时间阅读。

构建您的 Vite 应用程序

我们将假设您已经有一个，并且它位于 Symfony 项目根目录之外。

您需要在您的 vite.config.js 文件中设置一些选项

import { defineConfig } from 'vite';

// https://vite.ac.cn/config/
export default defineConfig({
  // ... your configuraiton.
  build: {
    emptyOutDir: true,
    manifest: true,
    outDir: "../app/public/some-vite-app",
    rollupOptions: {
      input: 'src/main.ts',
    },
    // The rest is up to you.
  },
})

这里最重要的细节是，此捆绑包要求您构建一个 manifest.json 文件，否则它将无法找到要包含的文件。

如果您需要包含由 main.ts 文件生成的资产，您需要在 build.rollupOptions.input 选项中指定它，否则它不会出现在清单文件中。

然后使用您习惯的 npm 或 yarn 工具构建它

npm run build
yarn build
# ...

在捆绑包中注册它

创建 config/packages/vite.yaml 文件

vite:
    app:
        # Using an absolute path.
        some-vite-app:
            manifest: "%kernel.project_dir%/public/some-vite-app/manifest.json"
            dev_url: https://:5173

        # Using a "public/" relative path.
        some-vite-app:
            manifest: "some-vite-app/manifest.json"
            dev_url: https://:5173

请注意，它必须位于 public/ 目录下。

dev_url 条目允许您在内核环境为 dev 时使用开发模式。目前环境名称是硬编码的，但稍后将是可配置的。

如果您明确地将 dev_url 设置为 null，则禁用开发模式。

将资产放在您需要的任何地方

编辑任何 Twig 文件并添加以下两个函数调用

<!DOCTYPE html>
<html lang="en">
<head>
<!--
  Your own head.
  -->
{{ vite_head('some-vite-app') }}
</head>
<body>
  {{ vite_body('some-vite-app') }}
</body>
</html>

其他一些参数可以更改头部脚本的行为

第一个参数是您在 yaml 配置中定义的应用程序名称，是必需的。
第二个参数是入口点文件名，默认设置为 src/main.ts，即与 vite.config.js 文件中 build.rollupOptions.input 条目中提供的名称相同。如果您提供了另一个名称，您必须在这里更改名称。

关于 manifest.json 解析的说明

当您的环境是 dev 时，manifest.json 文件在容器编译期间不会解析，而是在首次访问时在运行时解析。这意味着您在重建 Vite 应用程序时不需要进行任何其他操作。

对于所有其他环境，manifest.json 文件在容器编译期间解析，条目缓存在容器本身中：您在重新部署应用程序时需要重建缓存。

如果您需要能够配置环境或需要不同的行为，请提交一个问题，任何改进或建议都受欢迎。

替代方案

存在几种替代方案，至少有这些

这三个都采取了不同的路径。与这个包最大的不同之处在于，我们并没有尝试单独复制 symfony/webpack-encore-bundle。我们认为，如果您对 Vite 感兴趣并愿意使用它，只需创建一个纯 Vite 项目即可：这个包只会给您提供一个简单的方法，将资源轻松导入到 Twig 模板中。

makinacorpus / vite-bundle

维护者

详细信息