如何使用 Symfony2 将 JavaScript 文件包含到 twig 模板中

Question

我可以像这样轻松地将 CSS 个文件包含到我的 twig 模板中：

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/user/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/bootstrap-theme.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/main.css') }}"/>
{% endblock %}

但是对于我的 JavaScript 个文件

{% block javascripts %}
    <script src="{{ asset('bundles/user/js/jquery-1.11.3.min.js') }}"></script>
    <script src="{{ asset('bundles/user/js/bootstrap.min.js') }}"></script>
{% endblock %}

该方法无效。我也尝试过使用 assetics，但也没有用。

Answer 1

我推荐 Assetic 方法。这并不简单，但它会给你带来巨大的好处。

首先，将您的 JS 嵌入到这样的模板中：

{% block my_javascripts %}
    {% javascripts
        '@FooBarBundle/Resources/public/js/foo.js'
        '@FooBarBundle/Resources/public/js/bar.js'

        filter='?uglifyjs2'
    %}
    <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock %}

添加任意数量的 JS 文件。

现在运行命令行上的以下内容：

app/console assetic:dump

在您的 dev 环境中，这将在文档根目录中生成 JS 文件的副本。在您的prod中，这将在文档根目录中生成一个组合文件——第一个好处。

要在您编辑文件时在后台自动生成文件，运行从命令行执行以下命令，并保持运行ning 直到您完成（然后使用 [ 取消=37=]Ctrl+C):

app/console assetic:watch --force

（--force 选项导致 Assetic 生成文件，即使它似乎没有任何修改。）

另一个好处是 filter='uglifyjs2' 语句：它使文件 "compressed" 使用 UgilifyJS，加载速度更快。

Read more about using Assetic for JS and CSS in Symfony2 in the cookbook.

如何使用 Symfony2 将 JavaScript 文件包含到 twig 模板中

How to include JavaScript files into twig template using Symfony2

javascript

symfony

twig