Symfony2资产中JS文件的加载顺序答案

【问题标题】：Load order in Symfony2 assetic for JS filesSymfony2资产中JS文件的加载顺序
【发布时间】：2014-02-10 22:17:00
【问题描述】：

我目前正在使用一个使用一些 JS 文件的引导模板。为了让它们加载，我将所有必需的 JS 文件放在 app/Resources/views/base.html.twig 文件中。这是代码的sn-p：

{% block body %}{% endblock %}
{% block javascripts %}
    {% javascripts '@ABBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

我在位于 AB/ABBundle/Resources/views/Home/show.html.twig 的子树枝文件中的代码具有以下代码：

{% extends '::base.html.twig' %}
{% block body %}
    blah blah blah normal html code blah blah blah
{% endblock %}

问题是，当我查看此页面时，我收到了几个错误，例如“ReferenceError: jQuery is not defined”和“ReferenceError: $ is not defined”。即使包含 JS 文件也是如此（JS 文件的名称已按预期更改）。

我发现这个错误可以通过一个相当讨厌的 hack 来修复，而不是用一行代码加载所有 js 文件 {% javascripts '@ABBundle/Resources/public/js/*' %} 我知道需要像这样包含js文件：

{% block javascripts %}
    {% javascripts '@ABBundle/Resources/public/js/jquery.js' %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {% javascripts '@ABBundle/Resources/public/js/jquery.prettyPhoto.js' %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

有没有一种方法可以强制 Assetic 首先加载某些 JS 文件，同时仍然使用更短的：{% javascripts '@ABBundle/Resources/public/js/*' %} 选项？

【问题讨论】：

不，但是你可以扩展 Assetic 来支持这个，框架有点缺乏资产的依赖管理系统。
github.com/RobLoach/component-installer，这应该会有所帮助。

标签： php symfony twig assetic

【解决方案1】：

您可以使用不同的文件夹结构指定加载文件的顺序，如下所示：

{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js' 
               '@AcmeFooBundle/Resources/public/js/file2.js'
               '@AcmeFooBundle/Resources/public/js/folder/*'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

【讨论】：

【解决方案2】：

我通过按我想要的顺序命名我的 .js 文件来做到这一点。像这样：

10_foo.js
20_bar.js
30_baz.js

那我就不用一一指定了，照常做：

{% javascripts '@MyBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

它们是按顺序加载的。

现在，对于应该在每个页面中可用的主要库，我在 app/Resources/view 中使用了一个 base.html.twig 模板，该模板在每个页面中都得到了扩展，其中包含以下代码：

<body>标签之前：

{% stylesheets '@MyMainBundle/Resources/public/css/*' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% block stylesheets %}{% endblock %}

在<body>标签的末尾附近：

{% javascripts  '@MyMainBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}{% endblock %}

所以我将主要的 js 库（使用上面提到的命名约定）留在“MainBundle”中，并在基本模板中进行了配置。通过这种方式，它们被加载到每个页面中，并且我可以使用特定于该页面的一些文件来扩展 CSS 和 javascript 文件，如下所示：

{% extends '::base.html.twig' %}
{% block stylesheets %}
    {% stylesheets '@MySpecificBundle/Resources/public/css/*'  %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block body %}
     ... < whatever > ...
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {% javascripts  '@MySpecificBundle/Resources/public/js/*' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

【讨论】：

【解决方案3】：

这是一个古老的问题，但我也想知道如何实现这一点，并且基于@TroodoN-Mike 解决方案，我意识到这可以解决问题：

{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js' '@AcmeFooBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}

【讨论】：