将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