捆绑 Symfony 5 资产（管理可重用的捆绑资产）答案

【问题标题】：Bundling Symfony 5 assets (managing reusable bundle assets)捆绑 Symfony 5 资产（管理可重用的捆绑资产）
【发布时间】：2020-11-29 06:35:15
【问题描述】：

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

上面写着：

bundle 也不应该嵌入第三方库 JavaScript、CSS 或任何其他语言。

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

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

我在这里看到了这个问题，这似乎是相关的： Can a Symfony bundle have a own Webpack Encore configuration? 但它没有回答我的问题 - 显然 EasyAdmin 在 Bundle 中有它自己的 webpack.config.js。

【问题讨论】：

第一部分很简单：库的意思是 jquery 或 bootstrap 等。就你的第二个问题而言，从来没有真正追踪过。

标签： symfony webpack bundle symfony5

【解决方案1】：

简短的回答是，您的捆绑包应包含一个 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”目录，然后每个捆绑包的“Resources/public”目录将被复制到其中。

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

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

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

【讨论】：