什麼是Libman

微軟在Visual Studio 2017 15.8版本中內嵌了一個新的工具Library Manager。

Library Manager(簡稱Libman)是一個客戶端庫管理工具， 使用它可以很容易的管理專案中使用的客戶端js庫, css庫等，Libman相當於一個針對客戶端庫的Nuget，而且Libman並不是指標對.NET專案的，非.NET專案也可以使用。

注意： 這個工具暫時只是一個實驗階段的工具。

如何使用Libman

下面我們來通過一個小例子演示一下如何使用Libman

新增專案

為了體現Libman並不只針對.NET專案，我們建立一個空資料夾Code, 並在其中建立一個名為libs

然後我們可以右鍵點選code站點, 選擇Manage Client-Side Library

點選之後，code目錄中就會生成一個libman.json檔案, libman.json是Libman的配置檔案，其預設內容如下

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": []
}

libman.json中的配置項

• defaultProvider

  這個引數指定了預設使用客戶端庫的來源, Libman提供了3種可選的來源。

  • cdnjs
    - 預設來源
  • filesystem - 來自本地檔案
  • unpkg - 一個全球cdn

• defaultDestination

  客戶端庫的預設儲存位置

• libraries

  客戶端庫列表

新增jQuery 3.3.1

下面我們修改libraries節點中，新增對jquery 3.3.1的引用

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "libs/jQuery_3.3.1",
      "provider": "cdnjs"
    }
  ]
}
 

• library - 客戶端庫的名稱, 格式是“包名@版本號”
• destination - 客戶端庫在當前專案中的儲存位置
• provider - 客戶端庫的來源

這裡如果你不是貼上程式碼話，手動輸入會出現程式碼提示，Visual Studio會根據你的輸入匹配最接近的包名並列出所有可用的版本。

手動恢復客戶端庫

修改完成後，我們右鍵點選libman.json， 選擇Restore Client-Side Libraries

我們所需的客戶端庫就自動下載並匯入到專案指定目錄中了。

Build時自動恢復客戶端庫

除了手動恢復客戶端庫，Visual Studio還提供了一個Enable Restore Client-Side Libraries on Build的選項，即專案Build時自動恢復所需的客戶端庫。

選擇該項之後，Visual Studio會彈出一下提示

點選確認之後，專案中會出現一個package.json, 裡面添加了對Microsoft.Web.LibraryManager.Build庫的引用

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Microsoft.Web.LibraryManager.Build" version="1.0.163" targetFramework="net40" />
</packages>

如果當前是一個.NET專案，這個引用會出現在csproj檔案中

<Project Sdk="Microsoft.NET.Sdk.Web">  
  
<PropertyGroup>  
   <TargetFramework>netcoreapp2.1</TargetFramework>  
</PropertyGroup>  
  
<ItemGroup>  
   <PackageReference Include="Microsoft.AspNetCore.App" />  
   <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="1.0.163" />  
</ItemGroup>  
  
</Project>  

總結

Libman是對Visual Studio很好的補充(之前大部分都是使用bower等類似元件來管理), 它可以幫助開發人員管理客戶端庫，避免了開發人員手動下載並引入客戶端庫造成混亂，有興趣的同學可以嘗試一下。