---

2015 年 10 月

第 30 卷，第 10 期

本文章是由機器翻譯。

Visual-Bower Studio: 網頁程式開發的現代化工具

由 Adam Tuliper |2015 年 10 月

漫長的時間，我們存留在美麗圍牆花園中。在 Web 開發這個受保護生態系統，我們會使用 ASP.NET 和 Visual Studio 等複雜的技術。其餘的全球工具已考量而較差。如果您將而且很長的時間相當好處，我們的帝國的一部分。

不過，因為時間過後開發文化特性、 工具、 資源及多個已成為分散和甚至混亂。但是有些很穩固的技術有突然出現在此期間，包括啟動程序、 AngularJS、 Git、 jQuery、 苦差事、 大和 Bower，而且習慣使用的 Microsoft 生態系統的 Web 開發人員都能利用這些工具。

在這個兩篇文章系列的第一個部分中，我將提供 Bower，主要是用來封裝管理員的概觀 (但不是限於) 前端 Web 開發。在第二篇文章中，我將討論苦差事和大，可以用來執行各種工作的兩個 JavaScript 為基礎的工作跑石要複製檔案、 縮小、 串連運算子和甚至是編譯。

苦差事、 大和 Bower 是您的 Web 開發利器中的其他工具。整合與這些工具是 Visual Studio 2012 和 2013年建置到 Visual Studio 2015 和可透過增益集。您仍然需要加以安裝。

有些人可能會猜想是否 Microsoft 提供您了解並使用更多的工具。無法 NuGet 運作正常的封裝，而且做為建置工具不夠 msbuild 嗎? 這兩個問題的答案是肯定 — 在許多但並非全部的案例中。並不在敷使用傳統工具的情況下，苦差事、 大和 Bower 可以幫助。在 Web 專案中，您可能想要編譯您 Sass CSS 檔案變更時。或者您可能想要取得最新的啟動程序或 Angular 版本而不需等待有人從其建立 NuGet 套件的 microsoft。您無法完成是隨 NuGet 的工作或 msbuild。

NuGet 是棒的技術並持續開發、 支援和緊密地整合至 Visual Studio。繼續使用它針對您的專案、 特別的二進位檔和需要變更您的 Visual Studio 方案的專案。每次 jQuery 或啟動程序的新版本推出，雖然有人必須建立並發行一個 NuGet 套件。但由於 Bower 可以使用語意版本設定，只要釋出並標記 GitHub 上的工具，Bower 可以使用它。不是需要等到他人封裝 NuGet 封裝中。

我將使用 Node 封裝管理員 (npm) Bower 安裝以及在下一篇文章中的數個項目。Npm 未提供做為獨立下載，因為只要安裝 Node.js 從 nodejs.org。如需有關安裝及使用 npm 的詳細資訊，請造訪 Microsoft Virtual Academy 在頁面上的 「 封裝管理和工作流程自動化" bit.ly/1EjRWMx。

Bower 是通常用於前端 Web 開發的主要封裝管理員，而且有些人認為它是前端-前端只能封裝管理員解決方案。大部分用於例如啟動程序、 jQuery 和 AngularJS，前端 Web 開發的封裝可以使用 npm 或 Bower，安裝但在許多情況下相依性管理可能會有點容易 Bower (雖然某些可能不同意)。

Bower 套件，不同於 NuGet 封裝不限於單一來源型別。Bower 封裝可以是 Git 端點、 檔案系統、 內容檔案的 URL 上的資料夾或壓縮檔案等等。Bower 整合列出發佈的封裝，封裝登錄但封裝不需要安裝 Bower 中列出。

安裝和使用 Bower

Bower 通常會提取從 Git 儲存機制，因此您必須安裝 msysgit (msysgit.github.io) 和選取從命令提示字元中執行的選項中所示 [圖 1。

[圖 1 安裝 msysgit 命令列支援

使用 npm 安裝 Bower 全域如此您就可以從任何地方使用它在您的系統上。您只需要安裝 Bower 一次，而非依照個別專案。

npm install -g bower

現在您要所有設定為使用 Bower。開啟專案資料夾根目錄的命令列並使用下列格式將封裝安裝到您的專案：

bower install <package name/url/zip/etc.> --save

例如，若要安裝 jquery，只要輸入:

bower install jquery --save

前三個單字可能很合理，但--save 可能需要一些說明。此參數會使要特別注意您已安裝此封裝的 bower.json 檔案寫入的項目。(Bower 並不會建立這個檔案依預設，您必須告訴它這樣做，因為我會討論)。 Bower 安裝命令預設會執行的安裝命令; 資料夾中建立 bower_components 資料夾您可以使用 Bower 組態檔訂 bower_components 資料夾名稱.bowerrc。

您會注意到在 [圖 2 jQuery 封裝安裝結果中有許多多個檔案和資料夾比您預期的一樣。我真的很想在我的專案中所有 jQuery.js，但在此情況下取得整個 jQuery 來源的程式碼樹狀結構。許多封裝會安裝確實可讓您整個來源的程式碼樹狀目錄中，通常可大幅超過您想要。這會使新 Bower 使用者想知道要使用哪一個檔案。

[圖 2 Bower 安裝整個 jQuery 來源樹狀結構

有些專案將會發行減去您不想的額外檔案的應用程式封裝的版本。例如，AngularJS Bower 套件已角度根目錄中在 GitHub 上的儲存機制 github.com/angular/bower-angular。當您安裝此封裝 (bower 安裝角度-儲存)，就只有.js 和.css 您需要在 HTML 頁面中參考。

若要尋找的封裝，您可以移至 bower.io，使用 Visual Studio IntelliSense (稍後有涵蓋) 或搜尋 Bower 封裝儲存機制透過命令列:

bower search jquery

您也可以安裝數個封裝，這在當您想要編寫指令碼安裝程式就能：

bower install jquery bootstrap-css angular
#or install a specific version of jquery ui
bower install jquery-ui#1.10.4
#install a github repository as a package
bower install https://github.com/SomeRepository/project.git

Bower 建立您所安裝的封裝的本機快取。我 Windows 8 和 Windows 10 在系統上，預設的快取資料夾會是 C:\Users\ < MyName > \AppData\Local\bower\cache\packages (您可以覆寫這個預設值.bowerrc 檔案中)。您可以看到在 [圖 3, ，您可以管理的快取封裝透過清單和全新的命令。請注意，如果可以的隨時執行 bower 安裝，Bower 會從本機快取提取。

[圖 3 使用本機包爾快取

#install jquery package for the first time
bower install jquery
#uninstall jquery package
bower uninstall jquery
#install from cache (ie works disconnected)
bower install jquery --offline
#show me the cache
bower cache list
#clean local cache
bower cache clean
#will fail, package no longer cached
bower install jquery --offline

針對相依於其他封裝的封裝，Bower 會嘗試在您的檔案系統上安裝必要的相依性。Bower 有一般相依性樹狀結構表示正下方 /bower_components，不需要它的封裝是在安裝任何必要的相依性。例如，jQuery UI 的 bower.json 檔案會列出"jquery"的相依性:"> = 1.6，"這表示如果沒有尚未安裝 jQuery，jQuery 封裝的最新版本將會安裝至 /bower_components，只要它至少是 1.6 版。

更新或解除安裝套件相當簡單明瞭，並且包含版本和相依性檢查：

#will update based on version rules in bower.json, ex. "jquery": "~2.1.3"
#specifies any patch like 2.1.4 is acceptable to update, but 2.2.0 is not
bower update jquery
#will remove folder and reference in bower.json, but will prompt first
#if other packages have a dependency on jquery
bower uninstall jquery

Bower.json 檔案

此時如果我刪除 /bower_components 資料夾，則必須不知道有什麼套件已安裝或我的應用程式所需。如果我提供給另一個開發人員的原始程式碼 (具有任何封裝) 或帶到另一個環境，例如組建伺服器不 bower_components 資料夾中，該開發人員和我就是沒輒了。如果您熟悉 NuGet，這就類似遺漏 packages.config 檔案。最理想的 bower.json 檔案在您的應用程式以便 Bower 可以追蹤封裝相依性和版本，但它是選擇性的。

若要建立 bower.json 檔案，在專案根目錄中執行 bower init 命令，並遵循提示中所示 [圖 4。

[圖 4 建立 bower.json 檔案

C:\Users\Adam\Documents\WebApp> bower init
? name: MyWebApp
? version: 1.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Adam Tuliper <adam.tuliper@gmail.com>
? license: MIT
? homepage:
? set currently installed components as dependencies? (Y/n) Y
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)

如果您忘了建立 bower.json 檔案並安裝一堆沒有這個封裝或忘了將使用這些封裝 – 儲存選項、 別擔心。當您執行 bower init 命令時，它會要求 [目前安裝的組元件依存性]? 回答肯定表示 Bower 會查看 /bower_components 中的封裝並加入它判斷為插入的相依性區段中的根封裝。不過請注意是否 jQuery UI 相依於 jQuery、 jQuery 不新增為檔案中所安裝在您安裝 jQuery UI 時使用這個方法的相依性。永遠是個不錯的主意檢閱這個產生的相依性區段以確保您同意應該會列出相依性。

現在您可以初始化 Bower 為您在命令列，通常是在您的 Web 專案的根資料夾的專案。然後您就安裝相依性。範例 bower.json 檔案會顯示在 [圖 5。

[圖 5] 範例 bower.json 檔案

{
  "name": "MyWebApp",
  "version": "0.0.0",
  "authors": [
    "Adam Tuliper <adam.tuliper@anonymous>"
  ],
  "license": "MIT",
  "ignore": [
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.3",
    "bootstrap-css": "~3.3.4",
    "jquery-ui": "~1.11.4"
  },
   "devDependencies": {
    "angular-mocks": "~1.4.3"
  }
}
}

上方區段包含整體的專案和封裝資訊。略過其他值得一提的章節，相依性和 devDependencies。如果您從這個應用程式建立 Bower 封裝略過區段中排除所指示的檔案。因為我是使用 Web 應用程式且不需要建立我自己 Bower 封裝，此選項不適用。相依性和 devDependencies 區段包含的所有封裝已安裝了會用我的應用程式。他們沒問題更詳細地下一節。

管理相依性

您已了解您可以在 bower.json 檔案中指定的相依性的兩種不同類型: 相依性和 devDependencies。當您呼叫，例如加入區段的相依性中的項目包安裝 jquery-爾儲存。這些是將您的應用程式的生產環境中執行的封裝 (例如 jQuery)。DevDependencies 項目在另一方面，是通常不會對生產環境中，例如像角度 mock 或更少的模擬架構 / sass 此類編譯器的封裝。當您使用，例如 bower 安裝角度-mock-儲存開發人員選項會加入這些項目。這兩個相依性類型只會註明 bower.json 檔案中並不會影響您應用程式中使用這些檔案系統上的檔案。如果您正在執行的還原作業中的封裝，例如 QA 環境理論上您不必安裝 devDependencies。

若要安裝所有相依性只能在相依性區段並忽略 devDependencies，例如建立實際執行建置時，只是使用中的任何項目 bower 安裝 – 生產環境。

如果您想要查看所有相依性的應用程式使用，您可以執行 bower 清單中會產生如下所示的輸出：

bower check-new     Checking for new versions of the project dependencies..
MyWebApp#0.0.0 C:\Users\Adam\Documents\MyWebApp
├── angular#1.4.3 (1.4.4-build.4147+sha.bb281f8 available)
├─┬ angular-mocks#1.4.3 (1.4.4-build.4147+sha.bb281f8 available)
│ └── angular#1.4.3 (latest is 1.4.4-build.4147+sha.bb281f8)
├── bootstrap-css#3.3.4
├─┬ jquery-ui#1.11.4
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└── jquery1#2.1.4 (3.0.0-alpha1+compat available)

太多檔案

新成員，Bower 快速了解有些封裝會包含許多檔案時可能需要只能有一個檔案。有些 Bower 封裝列出所需使用封裝一或多個檔案中的主要組態區段。例如，jQuery 有約 90 檔案包含在封裝時將它安裝。但若要使用 jQuery，您只需要 jQuery.js，以便解決之道是查看 main 並注意 jQuery 的列出只 /dist 資料夾中的單一檔案:

{
  "name": "jquery",
  "version": "2.1.4",
  "main": "dist/jquery.js",
...
}

如果您看 jQuery /dist 資料夾中，您也可以找到 jQuery.min.js 和其對應的.map 檔案進行偵錯，雖然它不會對的清單這些主要項目中的用意是 jQuery.js 或 jQuery.min.js 因為用於生產環境中，不能兩者都有意義。

執行 bower 清單路徑會傳回所有的主要檔案的每個已安裝的封裝，就像這樣：

C:\Users\Adam\Documents\MyWeb> bower list --paths
  angular: 'bower_components/angular/angular.js',
  'bootstrap-css': [
    'bower_components/bootstrap-css/css/bootstrap.min.css',
    'bower_components/bootstrap-css/js/bootstrap.min.js'
  ],
  jquery: 'bower_components/jquery/dist/jquery.js'

在封裝建立者以確保它們列出的主要區段中的適當檔案是負擔。

因為依預設，所有的封裝檔案是 /bower_components 子資料夾下，您可能會認為我的 HTML 檔案會參照的檔案權限設為 off 此資料夾，如下所示：

<link rel="stylesheet" type="text/css"
  href="/bower_components/bootstrap-css/css/bootstrap.min.css">
<script src="/bower_components/bootstrap-css/js/bootstrap.min.js" />
<script src="/bower_components/angular/angular.js" />
<script src="/bower_components/jquery/dist/jquery.js" />

您可以找到許多範例在網際網路上執行這項操作和參考 /bower_components 資料夾內的檔案。這不是全新的做法。我不建議，跟我第一，不想要這類資料夾和潛在數百或數千個檔案部署到生產環境，需要只有幾個檔案應縮短並串連成更少的檔案時。我會討論的第二個技巧下一篇文章苦差事和大，但現在我將討論幾個可用的技術更好的方式使用 bower installer 模組中提取出這些主要檔案的其中一個。

Bower installer 模組會將所有主要的檔案複製到指定的資料夾結構。首先，全域 npm 安裝-g bower installer 透過電腦上安裝此模組。

接下來，新增區段至 bower.json 檔案來指定應複製這些主要檔案的位置:

"install": {
  "path": "lib"
},

每個封裝的主要檔案最後會在此案例中 \lib 底下的子資料夾中，例如 lib\jquery\jQuery.js，lib\angular\angular.js。

您可以自訂此程序相當。請務必簽出該封裝文件 bit.ly/1gwKBmZ。

上次執行 bower 安裝程式每次想將檔案複製到輸出資料夾。同樣地，有其他方式，例如使用苦差事或大複製這些檔案使用的工作 — 您甚至可以監看的資料夾變更為 — 但這是快速、 當您一開始會這麼做的最小相依性方式並不需要其他工作流程。

組建伺服器和原始檔控制

當您想要在組建伺服器上安裝必要的封裝為何? 這適用於您知道只有的案例是原始檔控制中的程式碼和所有其他封裝 (Bower/NuGet 等等) 安裝及/或在組建伺服器上建置 (小於 CoffeeScript 和類似 Sass)。有些商店將原始檔控制一切內容，包括所有二進位檔與第三方相依性。有些則依賴要還原的建置環境中封裝的封裝管理員。當我給其他人提供 Visual Studio 專案時，我通常會預期要還原在其電腦上的封裝。Bower 的一般建議與原始檔控制相關，其實至原始檔控制所有協力廠商程式碼如果您能夠忍受可能很大的儲存機制或如果您不要依賴 「 封裝管理員 」，否則不原始檔控制 /bower_components。

若要安裝所有相依性並使用剛才 bower.json 檔的主要檔案複製，只要執行下列命令：

#Will read bower.json and install referenced packages and their dependencies
bower install
#Optional - copy each packages main{} files into your predefined path
bower-installer

為什麼不只要 npm 嗎?

有些開發人員只要使用 npm、 其他人選擇 Bower 和一些混合使用。您可以讓您的工作流程更容易在任何情況下找到許多在 Bower 和 npm 封裝儲存機制的封裝。Npm 也不只適用於 Node.js 應用程式，同時也是為了管理用戶端和伺服器端的封裝。Npm 會有巢狀的相依性樹狀目錄中，這表示您安裝每個封裝，所有相依性安裝的該封裝 node_components 子資料夾中。例如，如果您使用三個封裝，每一個使用 jQuery 整個 jQuery 封裝會安裝三個不同的時間。巢狀的相依性可以建立很長的相依性鏈結。Npm 的 Windows 使用者幾乎可確保在某個時間點執行跨可怕的路徑長度錯誤因為這個緣故，例如： 目錄名稱 C:\Users\Adam\...\node_modules\somePackageA \node_modules\somePackageB\node_modules\insight\node_modules\inquirer\node_modules\readline2\node_modules\strip-ansi\node_modules\ansi-rege...太長。

這是巢狀的 npm 相依性結構的副產品雖然 npm 3 beta 版本沒有簡維的功能。我的目的並不說服您的其中一個或另一個值得高興的是您可以使用兩者。

Bower、 5 ASP.NET 和 Visual Studio

Visual Studio 2015 有內建支援 Bower 和 npm，包括安裝封裝和 IntelliSense。舊版的 Visual Studio 可以下載並安裝免費的封裝 IntelliSense 擴充 Visual studio 取得相同的功能。[圖 6 顯示一些可用來管理 bower.json 檔案內的封裝的選項。

在 Visual Studio 中的 [圖 6 封裝選項

您可以看到在 [圖 7, ，當您輸入封裝名稱 IntelliSense 可讓您比對封裝及版本中，儲存您的命令列或 Web 查詢。一旦變更 bower.json 檔案並將它儲存時，封裝將會安裝在本機而無須瀏覽至命令列。沒有任何這裡從檔案的觀點來看的 Visual Studio 特定的。換句話說，從任何 Web 專案預設 bower.json 運作。

在 Visual Studio 中的 [圖 7 Bower IntelliSense

[圖 8 指出 Bower 如何完全整合至您的 Web 專案和 Visual Studio 方案總管] 中會顯示從 bower.json 相依性。

在 [方案總管] 中的 [圖 8 Bower 相依性

ASP.NET 5 個新的專案結構中專案資料夾中的所有檔案都在專案中都包含預設但只有項目 /wwwroot 資料夾中的 Web 專案會定址為靜態內容，例如 HTML、 CSS、 影像和 JavaScript 檔案。知道這一點之後，您可以設定 bower.json 組態以便 bower 安裝程式會複製到這個資料夾相依性 (雖然的方塊外 ASP.NET 5 範本會使用大將預先設定的檔案複製到其目的地，以我將在下一篇文章中介紹)。

NuGet 封裝而仍然太棒了，因為大量使用支援，當然 ASP.NET 5 專案中。附帶一提，NuGet 設定 project.json 的相依性區段中但出現在 Visual Studio 中的參考。NuGet 封裝會使用--現成的伺服器端的封裝，例如記錄和 MVC 支援。

總結

Bower 是可以輕鬆地整合到您前端的工作流程的絕佳工具。其 API 是易於使用和在 Visual Studio 中的整合支援，您可以使用它 npm 以及 NuGet 權限來管理前端和後端的封裝。要花一小時或兩個學習 Bower;您會很高興你。

---

Adam Tuliper是活在陽光普照 SoCal Microsoft 的資深技術推廣者。他是 Web 開發人員、 遊戲開發人員、 Pluralsight 作者和全能技術的熱愛。在 Twitter 上找到他 @AdamTuliper 或 adamt@microsoft.com。

感謝以下的微軟技術專家對本文的審閱: Michael palermo 主講