Используя fxp/composer-asset-plugin

Используя fxp/composer-asset-plugin

По сравнению с asset-packagist, composer-asset-plugin не требует изменять конфигурацию приложения. Вместо этого, требуется установить специальный глобальный пакет Composer, выполнив следующую команду:

composer global require "fxp/composer-asset-plugin:^1.4.1"

Эта команда устанавливает composer asset plugin глобально, что позволит устанавливать зависимости из Bower и NPM. После установки все проекты на вашем комьютере будут поддерживать установку Bower и NPM пакетов, описанных в composer.json.

Добавьте следующие строки в composer.json вашего проекта, чтобы указать директории, в которые будут установлены необходимые Bower и NPM пакеты:

"extra": {
    "asset-installer-paths": {
        "npm-asset-library": "vendor/npm",
        "bower-asset-library": "vendor/bower"
    }
}

Note: fxp/composer-asset-plugin выполняет команду composer update существенно дольше, по сравнению с asset-packagist.

После настройки Composer для поддержки Bower и NPM пакетов:

1. Исправьте файл composer.json Вашего приложения или расширения и включите пакет в список в раздел require. Следует использовать bower-asset/PackageName (для Bower пакетов) или npm-asset/PackageName (для NPM пакетов) для обращения к соответствующей библиотеке.
2. Выполните composer update
3. Создайте класс комплекта ресурсов и перечислите JavaScript/CSS файлы, которые Вы планируете использовать в Вашем приложении или расширении. Вы должны задать свойство [[yii\web\AssetBundle::sourcePath|sourcePath]] как @bower/PackageName или @npm/PackageName.

Это происходит потому, что Composer устанавливает Bower или NPM пакет в директорию, соответствующую этим псевдонимам.

Note: В некоторых пакетах файлы дистрибутива могут находиться в поддиректории. В этом случае, Вы должны задать поддиректорию как значение [[yii\web\AssetBundle::sourcePath|sourcePath]]. Например, [[yii\web\JqueryAsset]] использует @bower/jquery/dist вместо @bower/jquery.