[鼠年全馬鐵人挑戰]Week04-ASP.NET Core 3.1 初心者入門(2)-安裝 Packages 和 Libraries

Nina Weng

5 min readMar 7, 2020

前言

這邊將介紹幾個常見的 packages 安裝工具，以下是本篇的大鋼。

Packages 安裝工具
NuGet
Node Package Manager (NPM)
LibMan

Packages 安裝工具

NuGet

Server-side (.NET) Libraries 的安裝工具

Node Package Manager (NPM)

Client-side libraries 的安裝工具，例如 JavaScrip 和 CSS 等 libraries。NPM是目前很常見的套件安裝工具，可以將 libraries 下載到本地端。若你不想要把整個 package 載到你本地端，你可以使用 Central location for static files (CDN) 的方式來嵌入套件。CDN 是已經將 packages 放到雲端了，不用直接把整個 package 載到你本地。例如，如果你要用Bootstrap，你只要 link https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css 這個網址到你 CSS 檔案裏面就可以了。使用 CDN 的好處是，瀏覽器有可能會已經有這個檔案的暫存了(cached) ，因為別的網站也有可能會用 CDN。

範例 — 使用 NPM 安裝 Bootstrap libraries

步驟一: 對專案按右鍵 > 加入 > 新增項目

步驟二: 右上角輸入 npm > 找到 npm configure file > 建立

步驟三: 加入 Dependency : 在devDependencies輸入"bootstrap": "4.4.1"

{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
  "bootstrap": "4.4.1"
}
}

步驟四: Ctrl + s 存檔
存檔後會看到專案底下的相依性多了npm的資料夾，裡面有剛剛安裝的bootstrap 4.4.1 。這樣就完成囉！

範例 — 解除 NPM 安裝的 Bootstrap libraries

只需要把剛剛新增的"bootstrap": "4.4.1"這行拿掉，然後存檔。就成功解安裝Bootstrap囉！是不是很簡單！

LibMan

LibMan 是 Visaul Studio 內建用來安裝 Client-side libraries 的簡易小工具。剛剛上面示範了使用 npm 安裝 bootstrap ，可是有個問題是，大多時候我們並不需要整個 package，而是只需要其中幾個檔案而已，這時候就可以使用 LibMan。

範例 — 使用 LibMan 安裝 Bootstrap libraries

步驟一: 對專案按右鍵 > 加入 > 用戶端程式庫。

步驟二: 這邊可以看到提供者(Provider)有四個選項可以選，cdnjs和jsdelivr都是可以使用CDN的；filesystem則是可以直接從你本地端匯入；unpkg則是使用npm的方式來安裝 libraries。這邊我們選擇 unpkg。
步驟三: 輸入bootstrap@4.4.1。在輸入的同時，你可以發現這邊有 intellisense，可以直接選擇你想安裝的版本。

步驟四: 選擇「選擇特地檔案」，這時候就可以只選擇我們需要的 bootstrap.css 檔案了。
步驟五: 選擇存放的目標位置，並按下「安裝」。

這時候可以看到有兩件事發生了。第一件事是在 wwwroot目錄底下有了 bootstrap.css 的檔案，而第二件事是這時多了一個 libman.json 檔案。

// libman.json
{
"version": "1.0",
"defaultProvider": "unpkg", // 我們剛剛選的 unpkg Provider
"libraries": [
  {
    "library": "bootstrap@4.4.1", // 我們剛剛選的安裝的 library
    "destination": "wwwroot/lib/bootstrap/", // 我們剛剛選的安裝路徑
    "files": [ // 我們剛剛選的要安裝的檔案
      "dist/css/bootstrap.css" 
    ]
  }
]
}

### 範例 — 解除 LibMan 安裝的 Bootstrap libraries
在 libman.json 的檔案裏面，滑鼠移到行號右邊，可以看到小燈泡，點開小燈炮裡面就有「解除安裝 bootstrap 4.4.1」啦！是不是很方便！甚至還有檢查有沒有需要更新的版本呢！

結語

今天介紹了如何使用三個內建的 Visual Studio 內建的小工具來安裝 packages💖