Question

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

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

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

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

    </body>
</html>

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

Answer 1

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

Answer 2

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

1。使用前端程序包管理器（Bower）

安装jQuery

Symfony documentation州：

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

如果尚未安装Bower，您可以使用npm（require node）全局安装：

npm install -g bower

根据Symfony documentation：

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

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

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

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

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，或
将其包含在<HEAD>或
在脚本中使用defer

Answer 3

为了纯洁。当然应该关闭<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标记的内容，并显示为空白。

Answer 4

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

下载供应商套餐：

您选择的软件包取决于您，我使用的是一个受欢迎的软件包（bmatzner / jquery-bundle）。

jQuery 2.x的

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

或

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

将jQuery包含在Symfony2中

4 个答案:

1。使用前端程序包管理器（Bower）

2。使用Composer安装jQuery

3。包含来自CDN的jQuery

在所有情况下：