How to manage front-end JavaScript libraries with composer in Drupal

By hari, 1 November, 2022

Drupal.org not officially providing a solution to add Front-end JavaScript libraries with composer command.

It's bit difficult to manage the front-end javascript libraries from NPM and Bower, but here is a way to manage that in composer.

Following command will help you to achieve this.


$ composer config repositories.asset-packagist composer https://asset-packagist.org

Once you execute the above command it will add https://asset-packagist.org as a repository in composer.json

This will update you composer.json file, and It's looks like below

Now, add the plugin as a dependency:


$ composer require oomphinc/composer-installers-extender

Then add installer type, just execute below command for that.


$ composer config --json --merge extra.installer-types '["bower-asset", "npm-asset"]'



$ composer config --json --merge 'extra.installer-paths.web/libraries/{$name}' '["type:bower-asset", "type:npm-asset"]'

composer.json will update like below

Finally you are done, now you can pull the libraries from Bower and NPM by composer command

Example


$ composer require npm-asset/dropzone

$ composer require bower-asset/dropzone
Reference

Tags