前端工具：处理 CSS 和 JavaScript

编辑此页

Symfony 让你灵活选择任何你想要的前端工具。通常有两种方法

  1. 使用 PHP 和 Twig 构建你的 HTML;
  2. 使用 JavaScript 框架（如 React、Vue、Svelte 等）构建你的前端

两者都非常棒 - 并在下面讨论。

使用 PHP 和 Twig

Symfony 提供了两个强大的选项来帮助你构建现代且快速的前端

  AssetMapper Encore
生产环境就绪？ 是 是
稳定？ 是 是
要求 无 Node.js
需要构建步骤？ 否 是
在所有浏览器中工作？ 是 是
支持 Stimulus/UX 是 是
支持 Sass/Tailwind 是 是
支持 React、Vue、Svelte？ 是 [1] 是
支持 TypeScript 是 是
移除 JavaScript 中的注释 否 [2] 是
移除 CSS 中的注释 否 [2] 是 [4]
版本化资源 始终 可选
可以更新第三方包 是 否 [3]

[1] 将 JSX (React)、Vue 等与 AssetMapper 一起使用是可能的，但是你需要使用它们的原生工具进行预编译。此外，某些功能（如 Vue 单文件组件）无法编译成可以被浏览器执行的纯 JavaScript。

[2] 你可以安装 SensioLabs Minify Bundle，以便在使用 AssetMapper 编译资源时，压缩 CSS/JS 代码（并删除所有注释）。

[3] 如果你使用 npm，则有可用的更新检查器（例如 npm-check）。

[4] CSS 注释可以使用 CssMinimizerPlugin 删除，该插件包含在 Webpack Encore 中，并且可以通过 Encore.configureCssMinimizerPlugin() 进行配置。

视频教程

你喜欢视频教程吗？查看 AssetMapper 视频教程系列。

AssetMapper 是处理你的资源的推荐系统。它完全在 PHP 中运行，没有复杂的构建步骤或依赖项。它通过利用浏览器的 importmap 功能来实现这一点，该功能在所有浏览器中都可用，这要归功于 polyfill。

阅读 AssetMapper 文档

Webpack Encore

视频教程

你喜欢视频教程吗？查看 Webpack Encore 视频教程系列。

Webpack Encore 是一种将 Webpack 集成到你的应用程序中的更简单方法。它包装了 Webpack，为你提供了一个简洁而强大的 API，用于捆绑 JavaScript 模块、预处理 CSS 和 JS 以及编译和压缩资源。

阅读 Encore 文档

从 AssetMapper 切换

默认情况下，新的 Symfony webapp 项目（使用 symfony new --webapp myapp 创建）使用 AssetMapper。如果你仍然需要使用 Webpack Encore，请使用以下步骤进行切换。这最好在新项目上完成，并提供与默认 webapp 相同的功能 (Turbo/Stimulus)。

1
2
3
4
5
6
7
8
9
# Remove AssetMapper & Turbo/Stimulus temporarily
$ composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle

# Add Webpack Encore & Turbo/Stimulus back
$ composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

# Install & Build Assets
$ npm install
$ npm run dev

Stimulus 和 Symfony UX 组件

一旦你安装了 AssetMapper 或 Webpack Encore，就该开始构建你的前端了。你可以随意编写你的 JavaScript，但我们建议使用 Stimulus、Turbo 和一套名为 Symfony UX 的工具。

要了解 Stimulus 和 UX 组件，请参阅 StimulusBundle 文档

使用前端框架 (React, Vue, Svelte 等)

视频教程

你喜欢视频教程吗？查看 API Platform 视频教程系列。

如果你想使用前端框架（Next.js、React、Vue、Svelte 等），我们建议使用它们的原生工具，并将 Symfony 用作纯 API。一个很棒的工具是 API Platform。它们的标准发行版带有 Symfony 驱动的 API 后端、Next.js 中的前端脚手架（也支持其他框架）和一个 React 管理界面。它完全 Dockerized，甚至包含一个 Web 服务器。

其他前端文章

本作品，包括代码示例，根据 Creative Commons BY-SA 3.0 许可证获得许可。
目录
    版本