时间戳

首页 > 解决方案 > 捆绑 Symfony 5 资产（管理可重用的捆绑资产）

symfony - 捆绑 Symfony 5 资产（管理可重用的捆绑资产）

问题描述

我正在按照以下文档为 Symfony 5 构建自己的 Bundle： https ://symfony.com/doc/current/bundles/best_practices.html

那里说：

包也不应该嵌入用 JavaScript、CSS 或任何其他语言编写的第三方库。

它没有进一步解释我的 Bundle 如何包含资产（js、图像、css、字体等）。

我可以在 EasyAdmin 文件中看到它有自己的 webpack.config.js - 这是我想要的。这是如何实现的？仅将 webpack.config.js 放入 Bundle 文件夹中是不允许在其上运行 yarn encore 的。

我在这里看到了这个问题，这似乎是相关的： Symfony 包可以有自己的 Webpack Encore 配置吗？ 但它没有回答我的问题——显然 EasyAdmin 在 Bundle 中有它自己的 webpack.config.js。

标签： symfonywebpackbundlesymfony5

解决方案

简短的回答是，您的捆绑包应该包含一个Resources/public/文件夹，其中包含已构建的生产资产。您可以使用assets:install- 命令将这些文件复制或符号链接到您的项目public/目录中，该目录将自动放置在以您的包命名的子目录中，例如public/bundles/appbundle/. 然后，在您的捆绑包中，您可以假设此路径存在并从那里加载资产，例如在带有资产助手的树枝模板中：{{ asset('bundles/appbundle/images/my_image.jpg') }}。

如果您想使用 EasyAdminBundle 作为参考，这里解释了它是如何工作的：

是的，EasyAdminBundle 提供了一个webpack.config.js，但它主要用于开发，永远不会被您的应用程序使用。相反，配置会将生产资产写入包内的适当位置（即src/Resources/public）：

Encore
    .setOutputPath('./src/Resources/public/')
    .setManifestKeyPrefix('bundles/easyadmin')

    .enableSourceMaps(false)
    .enableVersioning(false)
    .disableSingleRuntimeChunk()

这些构建的资产是捆绑包的一部分（参见上面的链接），并且始终与捆绑包一起分发，因此在使用捆绑包时无需自己构建前端资产。然后，您的应用程序可以通过运行将前端资源复制到项目目录的 Symfony 命令直接使用这些生产资产public/：

php bin/console assets:install

assets:install 命令将捆绑资产安装到给定目录（例如公共目录）。

php bin/console assets:install public

将在目标目录中创建一个“bundles”目录，并将每个 bundle 的“Resources/public”目录复制到其中。

在您的模板中，您可以在需要这些资产时使用 bundle-prefix 依赖这些资产，例如 for app.css（您可以在 EasyAdminBundle 的 layout.html.twig 中看到它正在使用）：

{{ asset('bundles/easyadmin/app.css') }}

如果你想做类似的事情，你可能必须确保 webpack-settings 不会破坏直接访问 css 文件，例如运行时块或版本控制，就像 EasyAdminBundle 所做的那样。或者，您可以要求您的捆绑包的用户也在他们的资产配置中引用您捆绑包中的 manifest.json，但是您可能不得不依赖可能不是您想要的包命名。

推荐阅读