ASP.NET Core's client library management LibMan

environment

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

Client library management

When you create a new ASP.NET Core project, the wwwroot/lib folder contains client libraries such as bootstrap and jquery. If you don't use the client library, it's still a problem. In general, you will often add new libraries or upgrade existing libraries such as jquery.

If you use a library on another server on the Internet, such as a CDN, you don't have to be aware of it. If you want to use the library on your server, you must manually download the library and place it in this lib folder.

However, as libraries increase and time goes by, management becomes troublesome, such as "Which version is the current version?", "Is there a necessary file properly?", "I have to find a new version again".

So ASP.NET Core allows you to manage the libraries of these clients in bulk with a library management feature called LibMan.

Introducing LibMan

From Solution Explorer, right-click the project and select Manage client-side libraries.

This will add a file called libman.json.

The contents of the file are shown in the figure. You can edit it directly, but it is not often entered directly because it is edited without permission by screen operation. For now, this is the only introduction.

Add client libraries

Right-click the project and → add a new client-side library.

Select a provider and enter the name of the library that you want to introduce into the library. You can search by partial match, so you can enter only the name that is the key.

For example, if you type jquery, the following suggestions are displayed:

Press enter or select a candidate at this time. The latest version is then automatically selected.

By the way, if there are no candidates, the selected provider may not be managed, so try choosing another provider.

The target location is easier to manage based on the default setting of "wwwroot/lib/", so you can leave it as is.

After you enter the library, click the install button.

If you see a dialog similar to the following, it may not exist in the provider or specify a version, etc.

The contents of libman.json are then added as follows:

When a library is registered in libman.json, it is automatically downloaded to wwwroot/lib (which may take some time). However, since jquery is in the lib folder from the beginning, it may not be up-to-date (it may be). In this case, delete the existing jquery and then update libman as follows (you don't have to do anything if it's up to date).

You can delete all existing libraries if you manage them in libman.

Right-click libman.json and select Restore client-side library.

The library is downloaded automatically.

Try introducing a new library.js "toaster".

It was introduced without having to download it manually.

How to use the library

You usually just use link and script tags to specify the appropriate path.

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/toastr.js/toastr.css" />

<!-- 省略 -->

<script src="~/lib/popper.js/umd/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/toastr.js/toastr.min.js"></script>

Library version changes and updates

Open libman.json.

If you erase the version of the target library, you will see suggestions, so all you have to do is select the version you want. Save the file when you make changes.

The library is automatically updated, but if it is not updated, right-click libman.json and select Restore client-side library.