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

Question

我正在按照本文档为 Symfony 5 构建自己的捆绑包： https://symfony.com/doc/current/bundles/best_practices.html

那里说：

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

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

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

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

Answer 1

简而言之，您的包应该包含一个Resources/public/文件夹，其中包含构建的生产资源。您可以使用assets:install- 命令将这些文件复制或符号链接到您的项目public/目录中，该目录将自动放置在以您的包命名的子目录中，例如public/bundles/appbundle/. 然后，在您的捆绑包中，您可以假设此路径存在并从那里加载资源，例如在带有 asset-helper: 的 twig-template 中{{ 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

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

php bin/console assets:install public

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

在您的模板中，每当您需要这些资源时，您都可以使用捆绑包前缀来依赖这些资源，例如app.css（您可以看到它在 EasyAdminBundle 的layout.html.twig 中使用）：

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

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