将jQuery包含在Symfony2中

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

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

我拥有:我有这样的共同布局:

   {% block javascripts %}{% endblock %}   {% block body %}{% endblock %}   

应该放置jquery.js。 那么web / bundles / jquery呢? 或者有一些特殊的官方jquery捆绑? 我应该使用asset()以及如何使用?

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

你可以使用其中之一

  

要么

 {% javascripts '@AcmeFooBundle/Resources/public/js/jquery.min.js' %}  {% endjavascripts %} 

进入你的树枝模板。

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

 php app/console assets:install web --symlink 

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

1.使用前端程序包管理器(Bower)安装jQuery

Symfony文档说明:

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

如果尚未安装Bower,则可以使用npm(require节点)全局安装它:

 npm install -g bower 

根据Symfony文档 :

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

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

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

在项目根目录中执行bower init以创建bower.json ,它将定义已安装的包。 为每个问题键入enter以回答默认值(为模块类型选择’globals’)。

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

 bower install --save jquery 

现在,您可以在模板中包含jQuery:

  

目前Bower没有像Composer那样的“锁定”function 。 这就是为什么你应该提交Bower下载的资产,而不是将目录添加到.gitignore文件中。 这可能在未来发生变化: 凉亭/凉亭#1748 。

2.使用Composer安装jQuery

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

要使Composer能够安装组件/ 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:

  

3.包含来自CDN的jQuery

例如,使用Google CDN:

  

关于使用CDN的优缺点,建议您阅读本页 。

在所有情况下:

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

  • 在你需要之前包括jQuery,或者
  • 将它包含在 ,或
  • 在脚本中使用defer

为了纯洁。 当然应该关闭标签,因此正确的代码片段是:

  

 {% javascripts '@AcmeFooBundle/Resources/public/js/jquery.min.js' %}  {% endjavascripts %} 

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

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

下载供应商包:

你选择的软件包取决于你,我在这个例子中使用了一个流行的软件包(bmatzner / jquery-bundle)。

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

要么

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

将Bundle添加到AppKernel:

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

安装资产:

php bin/console assets:install --symlink web

要包含在模板中:

      {% block title %}Welcome!{% endblock %} {% block stylesheets %}{% endblock %}     {% block body %}{% endblock %} {% block javascripts %}{% endblock %}   

清除缓存:

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