Использование Bower с Symfony

Symfony и всё её программное обеспечение отлично управляются Composer. Bower - это инструмент управления зависимостями для фронт-энд зависимостей, вроде Bootstrap или jQuery. Так как Symfony - это чисто бэк-энд фреймворк, она не особо может вам помочь с Bower. К счастью, его очень легко использовать!

Установка Bower

Bower строится поверх Node.js. Убедитесь, что он установлен, а потом запустите:

1
$ npm install -g bower

После того, как эта команда закончена, выполните bower в вашем терминале, чтобы узнать, правильно ли он установлен.

Tip

Если вы не хотите, чтобы на вашем комьютере был NodeJS, вы также можете использовать BowerPHP (неофициальный PHP-порт Bower). Имейте в виду, что сейчас он находится в бета-статусе. Если вы используете BowerPHP, используйте bowerphp вместо bower в примерах.

Конфигурирование Bower в вашем проекте

Обычно Bower скачивает всё в каталог bower_components/. В Symfony, только файлы в каталоге web/ доступны публично, так что вам нужно сконфигурировать Bower так, чтобы он скачивал всё туда. Чтобы сделать это, просто создайте файл .bowerrc с новым назначением (вроде web/assets/vendor):

1
2
3
{
    "directory": "web/assets/vendor/"
}

Tip

Если вы используете систему фронт-энд-построения вроде Gulp или Grunt, то вы можете установить любой желаемый каталог. Обычно вы будете использовать жти инструменты, чтобы в конечном счёте переместить все ресурсы в каталог web/.

Пример: Установка Bootstrap

Верите или нет, но вы уже готовы использовать Bower в вашем приложении Symfony. В качестве примера, вы сейчас установите в вашем проекте Bootstrap и включите его в ваш макет.

Установка зависимости

Чтобы создать файл bower.json, просто запустите bower init. Теперь вы готовы начать добавлять вещи в ваш проект. Например, чтобы добавить Bootstrap в ваш bower.json и скачать его, просто выполните:

1
$ bower install --save bootstrap

Это установит Bootstrap и его зависимости в web/assets/vendor/ (или тот каталог, который вы сконфигурировали в .bowerrc).

Чтобы узнать больше о том, как использовать Bower, посмотрите документацию Bower.

Включение зависимости в ваш шаблон

Теперь, когда зависимости установлены, вы можете включить bootstrap в ваш шаблон, как обычный CSS/JS:

  • Twig
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    {# app/Resources/views/layout.html.twig #}
    <!doctype html>
    <html>
        <head>
            {# ... #}
    
            <link rel="stylesheet"
                href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
        </head>
    
        {# ... #}
    </html>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    <!-- app/Resources/views/layout.html.php -->
    <!doctype html>
    <html>
        <head>
            {# ... #}
    
            <link rel="stylesheet" href="<?php echo $view['assets']->getUrl(
                'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
            ) ?>">
        </head>
    
        {# ... #}
    </html>
    

Отличная работа! Ваш сайт теперь использует Bootstrap. Теперь вы можете с лёгкостью обновлять bootstrap до последней версии, а также управлять другими фронт-энд зависимостями.

Мне Git-игнорировать или подтверждать ресурсы Bower?

На данный момент, вам стоит подтвердить ресурсы, скачанные Bower вместо добавление каталога (например, web/assets/vendor) в ваш файл .gitignore:

1
$ git add web/assets/vendor

Почему? В отличие от Composer, Bower на текущий момент не имеет функции "блокирования", что означает, что не существует гарантии, что запуск bower install на другом сервере даст вам именно те ресурсы, которые есть у вас на других машинах. Чтобы узнать больше, прочтите статью Проверка в фронт-энд зависимостях.

Но очень возможно, что Bower добавит функцию блокировки в будущем (например, bower/bower#1748).

Если вы не особо волнуетесь о том, чтобы у вас были точно такие же версии, то вы можете утвердить только файл bower.json. Запуск bower install даст вам позднейшие версии в рамках указанного диапазона каждого пакета в bower.json. Использования строгих ограничений версий (например, 1.10.*) обычно достаточно, чтобы гарантировать внесения только совместимых версий.

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.