使用 Assetic / Twig / Symfony2，我可以定义前端库吗？

Posted 2023-02-19

【中文标题】使用 Assetic / Twig / Symfony2，我可以定义前端库吗？

【英文标题】：With Assetic / Twig / Symfony2, can I define front end libraries?

【发布时间】：2012-06-05 12:07:46

【问题描述】：

我正在使用 Symfony2、Assetic 和 Twig。我有各种前端库——Backbone、jQuery、jQuery UI 和 Bootstrap。 Bootstrap 和 jQuery UI 都包含 CSS 和 JS 文件。

有没有一种方法可以定义它们需要包含的资源（包括依赖项），然后在 Twig / Assetic 中将所有这些资源包含在一个标签中？我希望拥有的是这样的：

// config.yml <!-- DOES NOT WORK -->
assetic:
  resources:
    jquery:
      js: /filepath/to/jquery.js
    jquery_ui:
      dependencies: jquery
      css: /filepath/to/jqueryui.css
      js: /filepath/to/jqueryui.js
    less:
      js: /filepath/to/less.js
    bootstrap:
      dependencies:  less, jquery 
      js: /filepath/to/bootstrap.js
      css: /filepath/to/bootstrap.css
    backbone:
      dependencies:  jquery 
      js:  /filepath/to/underscore.js, /filepath/to/backbone.js 

// view.html.twig
% use jquery_ui %
% use bootstrap % 

// outputs all js and css for jQuery, jQueryUI, Less, Backbone, and Bootstrap

我发现了几个相关的问题：

How to define Assetic resources in Symfony 2 yml or xml configuration file? Symfony2 Assetic + Twig Template javascript Inheritance

但似乎都不涉及在 config.yml 中定义资源。相反，他们在 base.html.twig 中定义它们，但这是我要避免的。

我尝试在 Twig 中使用use 标记，方法是定义一个名为“jquery_ui”的模板并在该块中使用% stylesheets % 和% javascripts %，然后在base.html.twig 中放置% use "jquery-ui.html" %。但是，use 不会导入模板，因为它有正文。

【参考方案1】：

虽然确实支持定义前端库，但遗憾的是不支持依赖解析。您还必须分别定义 CSS 和 JavaScript。

我一直在做的是在 /app/config/ 中创建一个名为 assets.yml 的单独文件，并将其包含在主配置中以保持干净。

assetic:
    assets:
        jquery:
            inputs:
                - '%kernel.root_dir%/Resources/public/js/jquery.js'
                - '%kernel.root_dir%/Resources/public/js/jquery-ui.js'
        my_lib:
            inputs:
                - '%kernel.root_dir%/Resources/public/js/my-custom-lib.js'
                - ...

注意 '%kernel.root_dir%' 在 Symfony2 中默认解析为 app 目录。您现在可以在 Twig 模板中使用这些资源了。

% block javascripts %
    % javascripts '@jquery' '@my_lib' output="js/jquery.js" %
        <script type="text/javascript" src=" asset_url "></script>
    % endjavascripts %
% endblock %

对 CSS 文件也可以这样做。该示例还演示了为什么不能将 CSS 和 JavaScript 定义为单一资产。

【讨论】：

我建议在项目的根目录中使用package.json，并记录如何在项目根目录的文件中重建工作区。有时我也会在app/ 目录中添加脚本。

我该如何使用 package.json 呢？

这看起来很棒。但是，我对扩展模板的 % block javascripts %? 时会发生什么有疑问。大概你需要在孩子中使用 parent() 占位符。在% block javascripts % 之外定义% javascripts % 标记以避免每次都输入此标记会更好吗？子模板还可以包含% javascripts % 标签吗？ Assetic 是否仍然足够聪明，只编译一个 css/js 文件？还是为“全球”站点编译一个，为扩展包编译另一个？

@cartbeforehorse 好吧。如果您正在扩展模板并希望向页面添加更多脚本，则必须使用 parent() 。 Assetic 不会将扩展模板中的父脚本和脚本编译为单个文件，我认为这很好——客户端将缓存常用脚本并下载页面的唯一脚本。或者，如果您不想每次都写 parent() ，您可以定义一个单独的块。

@gilden 在问我的问题之前我应该​​先做更多的测试。我的困惑源于我没有完全理解% javascripts % 标签。我做了更多的研究，现在理解得更好了。不过感谢您的回复——它也证实了我发现的所有其他内容，这令人放心。

【参考方案2】：

最简单的解决方案是将它们放在 web/ 目录中的适当目录中，因为这是为所有 Symfony 包提供服务的站点的根目录。

【参考方案3】：

您可能想查看 Cartero，它允许您定义“资产包”，包括依赖项，然后将这些包包含在您的页面中。

https://github.com/rotundasoftware/cartero

您需要编写一个 Symfony2 Hook，但这不会太难。