Symfony AssetMapper 教程

最后修改时间：2025年3月3日

Symfony AssetMapper 教程演示了如何在 Symfony 7.2 中使用 AssetMapper 管理前端资源。AssetMapper 通过利用 ES modules 等原生浏览器功能来简化资源管理。

Symfony

Symfony 是一套可重用的 PHP 组件，也是一个用于 Web 项目的 PHP 框架。Symfony 于 2005 年发布为自由软件。Fabien Potencier 是 Symfony 的最初作者。Symfony 在很大程度上受到了 Spring 框架的启发。

AssetMapper

AssetMapper 是一个 Symfony 组件，可简化前端资源管理。它通过使用 ES modules 等原生浏览器功能，无需 Webpack 等构建工具。

设置项目

我们首先创建一个新的 Symfony 项目并安装必要的依赖项。

$ composer create-project symfony/skeleton symfony-assetmapper "^7.2"
$ cd symfony-assetmapper

我们创建一个新的 Symfony 7.2 项目并导航到项目目录。

$ composer require symfony/asset-mapper

我们安装 AssetMapper 组件。

配置 AssetMapper

AssetMapper 在 config/packages/asset_mapper.yaml 文件中进行配置。默认情况下，它会在 assets/ 目录中查找资源。

config/packages/asset_mapper.yaml

framework:
    asset_mapper:
        paths:
            - assets/

此配置告诉 AssetMapper 在 assets/ 目录中查找资源。

添加资源

我们在 assets/ 目录中创建了一个简单的 CSS 文件和一个 JavaScript 文件。

assets/styles/app.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

这是一个用于样式化应用程序的简单 CSS 文件。

assets/app.js

console.log('Hello from AssetMapper!');

这是一个将消息记录到控制台的简单 JavaScript 文件。

在 Twig 中使用资源

我们创建了一个 Twig 模板来包含 CSS 和 JavaScript 文件。

templates/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
    </head>
    <body>
        {% block body %}{% endblock %}
        <script type="module" src="{{ asset('app.js') }}"></script>
    </body>
</html>

asset() 函数用于包含 CSS 和 JavaScript 文件。将 type="module" 属性添加到 script 标签以启用 ES modules。

创建控制器

我们创建一个控制器来渲染 Twig 模板。

$ php bin/console make:controller HomeController

我们生成一个 HomeController。

src/Controller/HomeController.php

<?php

declare(strict_types=1);

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_home')]
    public function index(): Response
    {
        return $this->render('home/index.html.twig');
    }
}

HomeController 渲染 home/index.html.twig 模板。

templates/home/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Home{% endblock %}

{% block body %}
<h1>Welcome to Symfony AssetMapper!</h1>
{% endblock %}

index.html.twig 模板继承自基础模板并显示欢迎消息。

运行应用程序

我们启动 Symfony 开发服务器并测试应用程序。

$ php bin/console server:start

我们启动开发服务器。

$ curl localhost:8000

我们在浏览器中访问主页。CSS 样式已应用，并且 JavaScript 消息已记录到控制台。

添加图片

我们将图片添加到 assets/images/ 目录中，并在 Twig 模板中包含它。

assets/images/logo.png

(Place your logo.png file here)

这是一个示例 logo 图片。

templates/home/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Home{% endblock %}

{% block body %}
<h1>Welcome to Symfony AssetMapper!</h1>
<img src="{{ asset('images/logo.png') }}" alt="Logo">
{% endblock %}

asset() 函数用于包含图片。

高级配置

AssetMapper 支持高级配置，例如：- 对资源进行版本控制以实现缓存失效。- 使用 npm 或 CDN 导入第三方库。- 使用 Sass 或 TypeScript 等预处理器。