Using Composer to manage your JS Dependencies

For a while now PHP Developers have used Composer, a PHP Dependency Manager, to manage their app dependencies. Certainly in the Drupal community, Developers have been using composer since Drupal 8 was released back in June 2013.

Composer is a dependency manager. It installs packages locally. A package is essentially a directory containing something. In this case it is PHP code, but in theory it could be anything. And it contains a package description which has a name and a version. The name and the version are used to identify the package.

By default, only the Packagist.org repository is registered in Composer. You can add more repositories to your project by declaring them in composer.json.

Repositories are only available to the root package and the repositories defined in your dependencies will not be loaded. 

When resolving dependencies, packages are looked up from repositories from top to bottom, and by default, as soon as a package is found in one, Composer stops looking in other repositories. 

https://getcomposer.org/doc/05-repositories.md#package

What is https://asset-packagist.org?

This repository allows installation of Bower and NPM packages as native Composer packages.

NO plugins and NO Node.js are required.

For NPM scoped packages use `scope--package` instead of `@scope/package`, e.g. `npm-asset/pusher--chatkit`.

So rather than having to manually download your dependencies manually, you can automate them using composer.

Add the asset.packagist repo to your master composer.json

e.g. under repositories key array add:

{
"type": "composer",
"url": "https://asset-packagist.org"
}

This will allow us to start installing dependencies that we require. e.g.

"require": {
...
        "npm-asset/knight-lab--timelinejs": "3.3.15",

...
}

Alternatively we can use the following command with or without a caret or tilde.

composer require  'npm-asset/knight-lab--timelinejs:^3.3.15'

However chances are we will need to define where we want these dependencies to be installed in our project. 

Fetching recently published packages

Sometimes when publishing a new package on npm, in order to download with composer, it may be necessary to navigate to https://asset-packagist.org do a search for your package and then fetch the module. Once the package is fetched it then becomes available in composer. 

Composer Installers Extender

The https://github.com/oomphinc/composer-installers-extender#composer-insta… in combination with composer installers https://github.com/composer/installers (allows you to customise the install path per package and package authors can modify the package name upon installing) plugin for Composer that allows any package to be installed to a directory other than the default vendor directory within a project on a package-by-package basis. 

The composer/installers plugin is a dependency of this plugin and will be automatically required as well if not already required.

The oomphinc plugin basically extends the composer/installers plugin to allow any arbitrary package type to be handled by their custom installer.

If using composer 2, we can usually install like so:

composer require oomphinc/composer-installers-extender

Under 'extra' section we also want to the following installer types.

    "installer-types": [
      "npm-asset",
      "bower-asset"
    ],

Installer Paths

Furthermore, often an install path will often vary from a package name. Here it is useful to change where we want to install a package or library dependency.

      "web/libraries/{$name}": [
        "type:drupal-library",
        "type:npm-asset"
      ],

This is a generic rule basically telling Drupal to use the name of a package and install it in the web/libraries/ folder

Deleting Libraries

One small issue I have come across when using composer to manage npm packages, is it you remove an dependency from composer.json, you need to manually delete the library. You can also try using composer remove e.g.

composer remove npm-asset/knight-lab--timelinejs

Overriding Installer Paths

This is where composer-installers-extender comes into it's own and allows us to control where our dependencies are installed. For example say we want to change the name of a package from say TimelineJS3-3.3.5 to TimelineJS3, we simply set this install path before the generic rule. e.g.

"web/libraries/TimelineJS3": [
"npm-asset/knight-lab--timelinejs"
],

Conclusion

Managing your non PHP dependencies including any third party libraries, npm and bower assets using composer can help your to manage all your site dependencies in a consistent manner. It can also save you time. Once you have setup this scaffolding, adding and updating other npm and bower dependencies then becomes a trivial task.