Установка bower и npm библиотек с помощью composer

В предыдущей статье Использование Component в Symfony2 мы рассматривали как использовать Component для менеджера зависимостей. Есть несколько недостатков, которые не позволяют нам всегда его использовать. Рассмотрим вариант использования composer для управления зависимостями библиотек из bower и npm.

В большинстве случаев css/js библиотеки используют bower как менеджер пакетов. Поэтому если использовать composer+robloach/component-installer эти пакеты приходится регистрировать в composer.json как package. И получается внушительный список.

Использование asset плагина

Установим его командой $ composer require fxp/composer-asset-plugin

Bower библиотеки мы будем устанавливать в папку web/components поэтому в composer.json добавим

"extra": {
  "asset-installer-paths": {
    "bower-asset-library": "web/components"     
  } 
}

Библиотеку мы устанавливам командой composer require bower-asset/jquery. Плагин удалит все файлы которые были в bower.json в ignore.

На данном этапе все готово, мы можем использовать нашу библиотеку, так как нам удобно. В целях более грамотного структурирования кода я использую requirejs. Давайте рассмотрим как его подключить. Если при использовании Component плагин сам делал для нас файл настроек, то в данном моменте нам необходимо все будет сделать самим.

Установка requirejs

Данную библиотеку можно установить с помощью менеджера пакетов npm. Поэтому, для того чтобы наша библиотека была в папке web/components в composer.json добавим

"extra": {
  "asset-installer-paths": {
    "npm-asset-library": "web/components"
  }
}

После установим командой composer require npm-asset/requirejs

Настройка requirejs

Создадим файл для конфигурации установленых библиотек src/AppBundle/Resources/public/js/require.config.js, путь может быть любой, главное чтобы он был доступен браузеру, с таким содержимым.

requirejs.config({
    "shim": {"materialize": {"deps": ["jquery", "jquery-hammerjs"]}},
    "paths": {
        "hammerjs": '/components/hammerjs/hammer.min',
        "jquery-hammerjs": ['/components/jquery-hammerjs/jquery.hammer'],
        "materialize": ['//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min', '/components/materialize/dist/js/materialize'],
        "code-prettify": ['//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify', '/components/google-code-prettify/src/run_prettify'],
        "jquery": ['//code.jquery.com/jquery-2.1.4.min', '/components/jquery/dist/jquery.min']
    }
});

В данной конфигурации у нас установлено несколько библиотек, установка ни чем не отличается от установки jquery и устанавливаются командой composer require bower-asset/{имя пакета} где {имя пакета} соответсвенно имя пакета в bower. В разделе paths указываем путь к нашей библиотеке. При указании массива второй файл загружается только при недоступности первого. Раздел shim предназначен для указания зависимостей, в данном примере при использовании materialize загрузятся jquery и jquery-hammerjs.

Для использования добавим в наш html 

<script type="text/javascript" src=“/components/requirejs/require.js"></script>
<script type="text/javascript" src="{{ asset(bundles/app/js/require.config.js) }}"></script>

В случае, если вы не используете Symfony просто укажите путь к вашему файлу require.config.js.

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

Наши js файлы будут выглядеть примерно так. 

requirejs(['jquery'], function ($) {
    'use strict';
    $(".button-collapse").each(function () {         // делаем что-то полезное     
    });
});

Для каждого раздела сайта создаем необходимые js файлы и не забываем их подключать. Если нам необходимо создать библиотеку, то в проекте в папке src/AppBundle/Resources/public/js/app/ создаем файл с именем библиотеки debug.js и содержимым.

define(['jquery'], function ($) {
    'use strict';
    return {
        error: function (data) {
            console.log(data);
        }
    };
});

Возвращаем мы объект, который будем использовать в других файлах или библиотеках.

Добавляем в require.config.js нашу папку для библиотек 

{
  "paths": {
    "app": "/bundles/app/js/app"
  }
}

Использовать нашу библиотеку можно указав в зависимостях

requirejs(['app/debug'], function (debug) {
    'use strict';
    $(".button-collapse").each(function () {
        // делаем что-то полезное        
        debug.error('some error');
    });
});

Выводы

Данный способ позволяет устанавливать js/css библиотеки без настройки дополнительных репозиториев в вашем файле composer.json. Для использования нам пришлось дополнительно устанавливать и настраивать requirejs, но в данном случае мы можем использовать библиотеки даже не установлены через менеджер пакетов. Еще один недостаток использования Component это то что библиотека считается устаревшей, и не будет больше поддерживаться, конечно плагин(robloach/component-installer) будет работать, но не будут добавлять новые библиотеки.