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

Question

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

上面写着：

A bundle should also not embed third-party libraries written in JavaScript, CSS or any other language.

它没有进一步解释我的 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。

Answer 1

简短的回答是，您的包应该包含一个 Resources/public/ 文件夹，其中包含构建的生产资产。您可以使用 assets:install 命令将这些文件复制或 symlink 到项目的 public/ 目录中，它将自动放置在以您的包命名的子目录中，例如 public/bundles/appbundle/。然后在您的包中，您可以假设此路径存在并从那里加载资产，例如在 twig-template 和 asset-helper 中：{{ 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()

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

php bin/console assets:install

The assets:install command installs bundle assets into a given directory (e.g. the public directory).
php bin/console assets:install public
A "bundles" directory will be created inside the target directory and the "Resources/public" directory of each bundle will be copied into it.

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

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

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

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

Bundling Symfony 5 assets (managing reusable bundle assets)

bundle

symfony

webpack

symfony5