前端工具：處理 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] 使用 AssetMapper 搭配 JSX (React)、Vue 等是可行的，但您需要使用它們的原生工具進行預編譯。此外，某些功能 (例如 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 Web 應用程式專案 (使用 symfony new --webapp myapp 建立) 使用 AssetMapper。如果您仍然需要使用 Webpack Encore，請使用以下步驟進行切換。這最好在新專案上完成，並提供與預設 Web 應用程式相同的功能 (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 Components

一旦您安裝了 AssetMapper 或 Webpack Encore，就可以開始建構您的前端了。您可以隨意編寫您的 JavaScript，但我們建議使用 Stimulus、Turbo 和一組名為 Symfony UX 的工具。

若要了解 Stimulus 和 UX Components，請參閱 StimulusBundle 文件

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

螢幕錄影

您偏好影片教學嗎？請查看 API Platform 螢幕錄影系列。

如果您想要使用前端框架 (Next.js、React、Vue、Svelte 等)，我們建議使用它們的原生工具，並將 Symfony 作為純 API 使用。一個很棒的工具是 API Platform。它們的標準發行版附帶一個 Symfony 驅動的 API 後端、Next.js 中的前端骨架 (也支援其他框架) 和一個 React 管理介面。它完全 Docker 化，甚至包含一個 Web 伺服器。

其他前端文章

本作品，包括程式碼範例，依據 Creative Commons BY-SA 3.0 授權條款授權。
目錄
    版本