Using Libman Providers to Coral Front End Libraries

The first package management system I learned to use was Bower.  It was great for the short love affair we had together, but it stopped being supported and I was weary of learning to use one of its replacements.  Fortunately, I haven’t had to with Libman.  Libman’s (Library Manager) simple JSON approach to bringing front end dependencies has been the easiest for me quickly implement and it has been a great addition to Visual Studio.  I implemented it possibly too quickly, however, and overlooked one powerful configuration setting:  provider.

Library Not On Libman!

That was my first sign of trouble, but what actually happened:  I didn’t specify the right provider.

The defaultProvider I specified was cdnjs, like the many examples out there, and though it has a lot of front end libraries, cdnjs, of course, doesn’t have all libraries.

Here’s a simple example of how Libman successfully does use cdnjs to bring in jQuery:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "destination": "wwwroot/lib/jquery",
      "files": [
        "jquery.min.js"
      ]
    }
  ]
}

Libman Provider Options

In addition to CDNJS, Libman supports two other providers.  Here is the complete list:

• cdnjs (default provider)
• filesystem (local files)
• unpkg (a CDN for everything on NPM)

This works great and if a dependency didn’t resolve, I added a provider line, changing it’s provider:

{
  "provider": "unpkg",
  "library": "bulma-checkradio",
  "destination": "wwwroot/lib/bulma",
  "files": []
}

UNPKG Library Could Not Be Resolved

When using unpkg as a provider, though, I couldn’t get any files to list in Intellisense.  I simply got no results.  I also got no versions on the library.

So, I did a bit of a hack and used the 3rd option for provider: filesystem.

Using Local Files

I had 2 particular packages that would show on unpkg, but return the following errors:

The “bulma-checkradio” library could not be resolved by the “unpkg” provider
The “datatables-bulma” library could not be resolved by the “unpkg” provider
Restore operation completed with errors

So, I imported them via NPM:

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "bulma-checkradio": "2.1.0",
    "datatables-bulma": "^1.0.1"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "update"
    ]
  }
}

But I didn’t want to add my _node_modules folder to the project, making NPM packages unable to be brought into Views.  So, I used Libman to copy the files from the _node_modules folder into my wwwroot/lib folder:

{
  "provider": "filesystem",
  "library": "node_modules/bulma-checkradio/dist/css/",
  "destination": "wwwroot/lib/bulma/bulma-checkradio/css",
  "files": [
    "bulma-checkradio.min.css"
  ]
},

It works, just wishing this was a bit smoother.