README

简介

Symfony 的 Vite 集成。此包允许您无缝地将 Vite 与 Symfony 集成，类似于 symfony/webpack 包。它扩展了 pentatrion/vite-bundle 的功能，增加了当前缺少的特性。

入门指南

安装

使用 Composer 安装包

composer requ daddl3/vite-and-compress-twig-symfony-bundle

在 symfony 的 config/bundles.php 中注册包

    Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
    daddl3\ViteAndCompressTwigSymfonyBundle\Daddl3ViteAndCompressTwigSymfonyBundle::class => ['all' => true],

安装后命令

安装后，使用以下命令设置 Vite

安装带有规则和 prettier 的 Vite 配置

php bin/console daddl3:install:npm-dependencies

要求

node v20.*
vite: ~5
php: ^8.0
symfony ^6.*

使用

实现元标签

使用在 Symfony Vite 文档中描述的 Twig 函数。

内联 CSS 或 JavaScript

<style>
    {{ vite_entry_file_css('critical') }}
</style>

<script>
    {{ vite_entry_file_javascript('critical') }}
</script>

用于压缩 CSS 的 Twig 过滤器

{% apply minifyCss | raw %}
    <style>
        body {
            background-color: grey;
        }
    </style>
{% endapply %}
    or
{{ css | minifyCss | raw }}

配置

使用此模板自定义您的 Vite 配置

// vite.config.js
import {defineConfig} from "vite";
import babel from "vite-plugin-babel";
import eslintPlugin from "vite-plugin-eslint";
import symfonyPlugin from "vite-plugin-symfony";

/* if you're using React */
// import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    /* react(), // if you're using React */
    symfonyPlugin(),
    babel(),
    eslintPlugin(),
  ],
  root: ".",
  base: "/build",
  publicDir: false,
  build: {
    manifest: true,
    emptyOutDir: true,
    assetsDir: "",
    outDir: "./public/build",
    rollupOptions: {
      input: {
        app: "./assets/app.js",
      },
    },
  },
});

daddl3 / vite-and-compress-twig-symfony-bundle

维护者

详细信息