Microsoft Library Manager - ASP.NET Core 管理前端套件的新好工具 | 紙鈔魚 - 點部落

2018-09-03

Microsoft Library Manager - ASP.NET Core 管理前端套件的新好工具

689
0
libman
2018-09-04

Microsoft Library Manager - ASP.NET Core 管理前端套件的新好工具

之前為了 Bower 以半生不死寫了一篇替代文章：ASP.NET Core 將 NPM Package 檔案複製到 wwwroot/lib 底下，但是總決還是有點不方便，每透過 npm 安裝新的套件都還要手動改一下設定檔，要做兩次動作

後來發現了一個尚未正式釋出的新專案：Microsoft Library Manager，初步使用覺得還不錯，解決了大部分後端開發者需要管理前端套件的需求且也不會太複雜；而且前一篇文章竟然被認識的人發現，只好來補一下功課

首先，Microsoft Library Manager 因為尚未正式釋出，所以沒有內建在 Visual Studio 內，也沒有在 Visual Studio Marketplace 內；必須自己下載專案回來 Build 或是使用 CI 自動 Build 完的 Vsix，但是要注意，目前專案設定是針對 VS 15.8 Preview 做建置(15.8 以後應該就內建了)，導致無法於 VS 15.7 上安裝，需要額外調整個設定，這邊請看下一篇文章：針對 Visual Studio 15.7 以下之版本建置 Microsoft Library Manager.vsix

備註：LibMan 不是用來取代 npm/yarn 的，我覺得主要是針對後端開發者只是需要用到些微管理前端相關 library，而非重度前端開發者

進入正題，安裝完 Microsoft Library Manager.vsix 後，於專案上點選右鍵即可看到 Manage Client-Side Libraries 選項，點選後即可看到於專案上會新增一檔案 libman.json ，並已自動開啟

此檔案結構為 json，預設有三個屬性，以下說明一下

version (可選): String

用來指定 libman.json 之語法版本，目前只有 1.0 可用 (擷至 2018/08/15)

defaultProvider (可選): String

用來指定前端套件預設來源，雖然說是可以選，但是因為通常我們套件來源都是固定的，因此推薦一定要有，預設是從 cdnjs 讀取資料，還有 File System 可以用

libraries(必填): Object Array

前端套件列表，用來列出所有受管理的套件與其設定，物件內容詳細說明請參照下說

首先我們先來看一下範例 libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "defaultDestination": "wwwroot/lib",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [ "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery"
    },
    {
      "library": "twitter-bootstrap@4.1.3",
      "destination": "wwwroot/lib/bootstrap"
    },
    {
      "library": "font-awesome@4.7.0",
      "destination": "wwwroot/lib/fontawesome"
    }
  ]
}

其中可以看到多了 defaultDestination，這是套件預設安裝目錄，但是在現階段蠻雞肋的，他會將所有的套件檔案直接都放在此指定目錄裡，而不會分不同的套件名稱，所以暫時不太用裡他，取而代之目前會使用的是在每個套件描述裡指定目錄

libraries 底下的物件常用的屬性有三個：