使用 Assetic/Twig/Symfony2，我可以定义前端库吗? [英] With Assetic / Twig / Symfony2, can I define front end libraries?

问题描述

我正在使用 Symfony2，以及 Assetic 和 Twig.我有各种前端库 - Backbone、jQuery、jQuery UI 和 Bootstrap.Bootstrap 和 jQuery UI 都包含 CSS 和 JS 文件.

I'm using Symfony2, with Assetic and Twig. I have various frontend libraries - Backbone, jQuery, jQuery UI, and Bootstrap. Both Bootstrap and jQuery UI include CSS and JS files.

有没有一种方法可以定义他们需要包含的资源(包括依赖项)，然后在 Twig/Assetic 中将所有这些资源包含在一个标签中?我想要的是:

Is there a way that I can define the resources they need to include (including dependencies), and then in Twig / Assetic just include all those resources in one tag? What I'd look to have is something like:

// 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

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

I found a couple of related questions:

• 如何定义Symfony 2 yml 或 xml 配置文件中的资产资源?
• Symfony2 Assetic + Twig 模板 JavaScript 继承

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

but neither seems to involve defining the resources in config.yml. Instead, they define them in base.html.twig but that's what I'm trying to avoid.

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

I tried using the use tag in Twig, by defining a template called 'jquery_ui' and using {% stylesheets %} and {% javascripts %} in that block and then in base.html.twig putting {% use "jquery-ui.html" %}. However, use won't import the template because it has a body.

推荐答案

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

Although there is indeed support for defining front-end libraries, there is unfortunately no support for dependency resolving. You must also define your CSS and JavaScript separately.

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

What I have been doing, is creating a separate file in /app/config/ called assets.yml and including it in the main configuration to keep things clean.

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 模板中的资源.

Note that ´%kernel.root_dir%´ resolves to the app directory by default in Symfony2. You may now use the assets in your Twig templates.

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

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

The same could be done for CSS files. The example also demonstrates why it's not possible to define CSS and JavaScript as a single asset.

这篇关于使用 Assetic/Twig/Symfony2，我可以定义前端库吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！