将 jQuery 包含到 Symfony2 中

Posted

技术标签:

【中文标题】将 jQuery 包含到 Symfony2 中【英文标题】：Include jQuery into Symfony2 【发布时间】：2012-08-14 00:39:14 【问题描述】：

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

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

我有什么：我有这样的常见布局：

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

    </body>
</html>

jquery.js 应该放在哪里。 web/bundles/jquery 呢？还是有一些特殊的官方 jquery 捆绑包？我应该使用asset() 以及如何使用？

【问题讨论】：

我已经回答了类似的问题here。您不应该将供应商库放入您自己的捆绑包中。对任何前端库使用“app/Resources/...”。 【参考方案1】：

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

1。使用前端包管理器 (Bower) 安装 jQuery

​​>

Symfony documentation 声明：

Bower 是一个用于前端依赖的依赖管理工具，例如 Bootstrap 或 jQuery。

如果还没有安装 Bower，你可以使用 npm 全局安装它（需要节点）：

npm install -g bower

根据Symfony documentation：

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

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


    "directory": "web/assets/vendor/"

在您的项目根目录中执行 bower init 以创建 bower.json，它将定义已安装的包。为每个问题输入 enter 以回答默认值（为模块类型选择“globals”）。

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

bower install --save jquery

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

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

目前 Bower 没有"lock" feature like on Composer。这就是为什么您可能应该提交 Bower 下载的资产，而不是将该目录添加到您的 .gitignore 文件中。这可能会在未来发生变化：bower/bower#1748。

2。用 Composer 安装 jQuery

​​>

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

要让 Composer 能够安装 components/jquery 之类的组件，您需要先添加 component-installer：

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的优缺点，我建议你阅读this page。

在所有情况下：

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

在需要之前包含 jQuery，或者 将其包含在&lt;HEAD&gt; 中，或者 在您的脚本中使用defer

【讨论】：

composer方式不安装component-dir路径下的文件夹。它将钢安装在供应商文件夹中 它在web/assets/vendor 中很好地安装了jQuery，我刚刚测试了它。注意在执行composer install之前更新composer.json。如果composer install 没有安装任何内容，请改用composer update。【参考方案2】：

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

下载供应商包：

你选择的包由你决定，我在这个例子中使用了一个流行的包（bmatzner/jquery-bundle）。

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

或

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

将捆绑包添加到您的 AppKernel：

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

【讨论】：

【参考方案3】：

假设您的 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

【讨论】：

【参考方案4】：

为了纯洁。当然&lt;script&gt;标签应该是关闭的，所以正确的sn-ps代码是：

<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标签的内容并显示为空白。

【讨论】：

由于未知原因，使用 html-legal 单例（自动关闭）脚本标记会破坏 sf-toolbar（至少在 chrome 上）。不好：&lt;script src=" asset('bundles/jquery/jquery.js') " /&gt; 使用空但关闭的标签有效。好：&lt;script src=" asset('bundles/jquery/jquery.js') " type="text/javascript" &gt;&lt;/script&gt; 根据 W3C HTML4 / 5 或 XHTML 规范，@dman 自关闭脚本标签不是有效的 HTML。 w3.org/TR/html4/interact/scripts.html#h-18.2.1 必须同时包含开始和结束标签。

以上是关于将 jQuery 包含到 Symfony2 中的主要内容，如果未能解决你的问题，请参考以下文章

带有 CSRF 的 Symfony2 表单通过 JQuery AJAX 传递

Symfony2 和 Blueimp jQuery-File-Upload：在哪里设置“server/php”目录

如何使用 symfony2“手动”处理文件上传？

Symfony2 上传 javascript blob

Symfony2 注销 CSRF 保护：csrf_provider 无法识别

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