README

此 Symfony 扩展包通过提供基于 Vite 的 manifest.json 或其开发服务器的 Twig 函数来帮助集成 Vite。

需求

为了使用此扩展包，您的项目必须满足以下要求

Symfony ^4.4 || ^5.0 || ^6.0

安装

运行以下命令安装扩展包

composer require k10r/vite-encore

现在，在您的 config/bundles.php 中注册扩展包

return [
    // ...
    K10r\ViteEncoreBundle\K10rViteEncoreBundle::class => ['all' => true],
];

如果您还没有安装 Vite，请运行以下命令进行安装

npm install -D vite

配置

配置扩展包包括两个部分：Vite 和 Symfony。后者是可选的，因为此扩展包已经提供了合理的默认值。

Vite

首先在项目根目录下创建一个 vite.config.js 文件，并用以下内容填充它

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
    root: 'assets',
    base: '/dist/',

    build: {
        outDir: resolve(__dirname, 'public/dist'),
        emptyOutDir: true,
        manifest: true,
        target: 'es2018',
        rollupOptions: {
            input: '/js/app.js'
        },
    },

    server: {
        cors: true,
        strictPort: true,
        port: 3000,
    },
});

从那里开始，您可以根据需要调整配置。有关如何配置 Vite 的更多信息，请参阅官方文档。

为了使上述配置与您的项目兼容，您需要在 <project-root>/assets/js 目录中创建一个 app.js 或在配置中调整 root 和 build.rollupOptions.input 选项。

Symfony

为了更改默认配置，您可以在 <project-root>/config/packages 目录中创建一个 k10r_vite_encore.yaml。

默认配置如下

# config/packages/k10r_vite_encore.yaml
k10r_vite_encore:
    base: /dist/
    server:
        enabled: true
        host: localhost
        port: 3000
        https: false

选项

base - 字符串

此选项告诉 Symfony 在相对于 public 目录的位置查找捆绑的资产。值必须等于 Vite 配置中的 root 选项，以及与 build.outDir 选项的最终路径片段相匹配。

server.enabled - 布尔值

此选项控制，当项目以 APP_ENV=dev 启动时是否使用 Vite 开发服务器。这需要启动开发服务器。

server.host - 字符串

此选项控制用于从开发服务器查询资产的域名。它应该对应于开发服务器将运行在其上的 IP/域名。

server.port - 整数

此选项控制用于访问开发服务器的端口号。它应该对应于 Vite 配置中的 server.port 选项。

server.https - 布尔值

此选项控制是否通过 https 访问开发服务器。

用法

为了包含您的捆绑资产，分别使用以下 Twig 函数来包含脚本和样式

{{ vite_style_entry('js/app.js') }}
{{ vite_script_entry('js/app.js') }}

js/app.js 是与上面提供的 Vite 配置对应的入口点。它必须与 build.rollupOptions.input 的值相匹配，不能有尾随斜杠。

使用开发服务器

您可以通过运行 npx vite 或在您的 package.json 中创建别名脚本来运行 vite 来启动开发服务器。

为生产构建

如果您想为生产构建，请使用命令 npx vite build 或在您的 package.json 中创建别名脚本来执行 vite build。

变更日志

本项目遵循语义化版本控制。请参考 CHANGELOG.md 获取详细的变更内容和迁移说明。

许可证

MIT

k10r / vite-encore

维护者

详细信息