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

В статье Менеджеры Js/Css библиотек мы рассматривали какие есть варианты использования менеджеров зависимости. В данной статье мы рассмотрим как использовать Component для Symfony2.

Настройки для Component

В файле composer.json добавим

{
    "config": {
//…
        "component-dir": "web/components",
        "component-baseurl": "/components"
    }
}

Параметр component-dir указывает куда копировать необходимые нам файлы скриптов, стилей или картинки указанные в настройках библиотек. И component-baseurl это настройка для requirejs указывает путь который доступен из браузера.

Установка библиотек типа component

Установка в таком случае ничем не отличается от стандартной установки например components/bootstrap, просто выполняем команду composer require components/bootstrap

Библиотека скачивается в нашем случае в папку vendor, но файлы указанные в настройках composer.json

{
  "extra": {
    "component": {
      "scripts": [
        "js/bootstrap.js"
      ],
      "files": [
        "js/*.js",
        "css/*.css",
        "css/*.map",
        "fonts/*",
        "less/mixins/*.less",
        "less/*.less"
      ],
      "shim": {
        "deps": ["jquery"]
      }
    }
  }
}

Копируют в папку web/components файлы указанные в files. Также добавляется конфигурация в requirejs, например зависимости библиотеки.

Библиотека без поддержки component

Библиотека добавлена в composer, только без подержки component например bootstrap-select/bootstrap-select. Добавляем в composer.json

{
    "require": {
        "robloach/component-installer": "*",
        "bootstrap-select/bootstrap-select": "~1.7"
    },
    "extra": {
        "component": {
            "bootstrap-select/bootstrap-select": {
                "scripts": [
                    "dist/js/bootstrap-select.js"
                ],
                "files": [
                    "dist/js/*.js",
                    "dist/js/i18n/*.js",
                    "dist/js/*.map",
                    "dist/css/*.css",
                    "dist/css/*.map",
                    "less/*.less"
                ],
                "shim": {
                    "deps": [
                        "jquery"
                    ]
                }
            }
        }
    }
}

Устанавливаем командой composer update bootstrap-select/bootstrap-select.

Библиотеки без поддержки composer

Очень часто библиотеку добавляют в bower, реже в component, и очень редко добавляют в packagist. Для добавления такой библиотеки, воспользуемся инструкцией и добавим в composer.json

{
    "require": {
        "robloach/component-installer": "*",
        "google/code-prettify": "dev-master"
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "google/code-prettify",
                "type": "component",
                "version": "master",
                "source": {
                    "url": "https://github.com/google/code-prettify",
                    "type": "git",
                    "reference": "master"
                },
                "extra": {
                    "component": {
                        "scripts": [
                            "src/prettify.js"
                        ],
                        "styles": [
                            "src/prettify.css"
                        ]
                    }
                },
                "require": {
                    "robloach/component-installer": "*"
                }
            }
        }
    ]
}

Установим командой composer update google/code-prettify

Выводы

Используя composer и robloach/component-installer очень легко следить за js/css библиотеками и поддерживать актуальные версии. Единственное хотелось бы чтобы разработчики добавляли свои библиотеки не только в bower, но и в другие менеджеры где возможно использовать библиотеку. В данном случае разработчик использует что ему удобно. Одно из преимуществ данного подхода это то, что только необходимые нам файлы доступны из браузера. Для более детального изучения настроек воспользуетесь документацией.