将jQuery包含在Symfony2中 - Include jQuery into Symfony2

我是Symfony2框架的新手，并不完全了解如何使用javascript以及如何以最佳方式包含他们的脚本。

我需要的是：在每个页面中包含jQuery脚本。

我

有什么：我有这样的通用布局：

<!DOCTYPE html>
<html>
    <head>
        {% block javascripts %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

jquery.js应该放在哪里。web/bundles/jquery呢？或者有一些特殊的官方jquery捆绑包？我应该使用 asset（）以及如何使用吗？

假设你的jquery.min.js被放置在 src/Acme/FooBundle/Resources/public/js/

您可以使用任一

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>

或

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

进入你的树枝模板。

确保之后安装了资产或运行此命令

php app/console assets:install web --symlink

有几种方法可以将jQuery包含在Symfony项目中。您可以：

1. 使用前端包管理器（Bower）安装jQuery。

Symfony文档指出：

Bower是前端依赖的依赖管理工具，如Bootstrap或jQuery。

如果尚未安装 Bower，您可以使用 npm（需要节点）全局安装它：

npm install -g bower

根据Symfony文档：

捆绑包不应嵌入用 JavaScript、CSS 或任何其他语言编写的第三方库。

因此，我们将jQuery直接存储在可公开访问的web/目录中。要告诉Bower在哪里安装软件包，请在Symfony项目根目录中创建一个.bowerrc文件，其中包含以下内容：

{
    "directory": "web/assets/vendor/"
}

在项目根目录中执行bower init以创建 bower.json，它将定义已安装的软件包。为每个问题键入 Enter 以回答默认值（为模块类型选择"全局"）。

Bower 已准备好在您的项目中安装 jQuery：

bower install --save jquery

现在你可以在模板中包含jQuery：

<script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script>

目前，Bower没有像Composer那样的"锁定"功能。这就是为什么你应该提交Bower下载的资产，而不是将目录添加到你的.gitignore 文件中。这在未来可能会改变：bower/bower#1748。

2. 使用 Composer 安装 jQuery

即使 Composer 是 PHP 的依赖管理器，你也可以使用它来安装 jQuery。

要使 Composer 能够安装像 components/jquery 这样的组件，你首先需要添加组件安装程序：

composer require robloach/component-installer

然后修改您的 composer.json 文件以包含：

"require": {
    "components/jquery": "3.1.1"
},
"config": {
    "component-dir": "web/assets/vendor"
},

并执行composer install .这将在web/assets/vendor目录中安装 jQuery。

然后，您可以在模板中包含 jQuery：

<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>

3. 包含来自 CDN 的 jQuery

例如，使用Google CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

关于使用 CDN 的优缺点，我建议您阅读此页面。

在所有情况下：

为了确保你的脚本（需要jQuery）能够工作，必须首先加载jQuery。因此，根据您的页面加载要求，您应该：

在你需要之前包含jQuery，或者
将其包含在<HEAD>中，或
在脚本中使用延迟

为了纯洁。当然，<script>标签应该关闭，所以正确的代码片段是：

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>

和

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

否则，页面的整个内容将被视为 script 标记的内容，并显示为空白。

要使用作曲家包实现，请导航到您的 symfony 包并运行以下命令。

下载供应商包：

您选择的软件包取决于您，我在这个例子中使用了一个流行的软件包（bmatzner/jquery-bundle）。

php composer.phar require bmatzner/jquery-bundle:2.* for jQuery 2.x

或

php composer.phar require bmatzner/jquery-bundle:1.* for jQuery 1.x

将捆绑包添加到应用内核：

/* /app/AppKernel.php */
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            new Bmatzner'JQueryBundle'BmatznerJQueryBundle(),
    ///...

安装资产：

php bin/console assets:install --symlink web

要包含在模板中：

<!-- /app/Resources/views/base.html.twig -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <script type="text/javascript" src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

清除缓存：

php bin/console cache:clear --env=dev
php bin/console cache:clear --env=prod