在 2002 年的一本著作中，David Weinberger 將發展迅速的 Web 內容描述成一個 小塊鬆散組合（Small Pieces Loosely Joined）。這個比喻讓我印象深刻，因為大家一般很容易認為 Web 是一個巨大的技術堆疊。實際上，您訪問的每個網站都是庫、語言與 Web 框架的一種獨特組合。

LAMP 堆疊 是早期表現突出的開源 Web 技術集合之一：它使用 Linux® 作為作業系統，使用 Apache 作為 Web 伺服器，使用 MySQL 作為資料庫，並使用 Perl（或者 Python 和 PHP）作為生成基於 HTML Web 頁面的程式語言。這些技術的出現並非為了一起聯合工作。它們是獨立的專案，由多位雄心勃勃的軟體工程師前赴後繼地整合在一起。自那以後，我們就見證了 Web 堆疊的大爆發。每一種現代程式語言似乎都有一個（或兩個）對應的 Web 框架，可將各種混雜的技術預先組裝在一起，快速而又輕鬆地建立一個新的網站。

MEAN 堆疊是 Web 社群中贏得大量關注和令人興奮的一種新興堆疊：MongoDB、Express、AngularJS 和 Node.js。MEAN 堆疊代表著一種完全現代的 Web 開發方法：一種語言執行在應用程式的所有層次上，從客戶端到伺服器，再到持久層。本系列文章演示了一個 MEAN Web 開發專案的端到端開發情況，但這種開發並不僅限於簡單的語法。本文將通過作者的親身實踐向您深入淺出地介紹了該堆疊的元件技術，包括安裝與設定。參見 下載 部分，以便獲取示例程式碼。

關於本系列

在使用開源軟體構建專業網站領域時，MEAN（MongoDB、Express、AngularJS 和 Node.js）堆疊是對流行已久的 LAMP 堆疊的一個新興挑戰者。MEAN 代表著架構與心理模型（mental model）方面的一次重大變遷：從關係資料庫到 NoSQL，以及從伺服器端的模型-檢視-控制器到客戶端的單頁面應用程式。本系列文章將介紹 MEAN 堆疊技術如何互補，以及如何使用堆疊建立二十一世紀的、現代的全堆疊 JavaScript Web 應用程式。

“實際上，您訪問的每個網站都是庫、語言與 Web 框架的獨特組合。”

從 LAMP 到 MEAN

MEAN 不僅僅是一次首字母縮寫的簡單重新安排與技術升級。將基礎平臺從作業系統 (Linux) 轉變為 JavaScript 執行時 (Node.js) 讓作業系統變得獨立：Node.js 在 Windows® 與 OS X 上的執行情況和在 Linux 上一樣優秀。

Node.js 同樣取代了 LAMP 堆疊中的 Apache。但 Node.js 遠遠不止是一種簡單的 Web 伺服器。事實上，使用者不會將完成後的應用程式部署到單機的 Web 伺服器上；相反，Web 伺服器已經包含在應用程式中，並已在 MEAN 堆疊中自動安裝。結果，部署過程得到了極大簡化，因為所需的 Web 伺服器版本已經與餘下的執行時依賴關係一起得到了明確定義。

不僅是 MEAN

儘管本系列文章重點講述的是 MEAN 太陽系中的四大行星，但也會介紹 MEAN 堆疊中的一些較小的（但並非不重要的）衛星類技術：

• Yeoman：一種功能強大的命令列開發工具組合，用於基架 (Yo)、編譯指令碼 (Grunt) 與客戶端依賴關性管理 (Bower)。
• 測試庫：除了 Mocha、Jasmine 和 Karma 以外，還有大量測試庫可用於模擬 Ajax 呼叫 (Chai)，顯示測試範圍 (Istanbul)，以及自動完成功能測試，以便在實際的瀏覽器中 執行它們(Protractor)。

從傳統資料庫（如 MySQL）到 NoSQL，再到無架構的、以文件為導向的持久儲存（如 MongoDB），這些代表著持久化策略發生了根本性的轉變。使用者花費在編寫 SQL 上的時間將會減少，將會有更多的時間編寫 JavaScript 中的對映/化簡功能。使用者還能省掉大量的轉換邏輯，因為 MongoDB 可以在本地執行 JavaScript Object Notation (JSON)。因此，編寫RESTful Web 服務變得前所未有的容易。

但從 LAMP 到 MEAN 的最大轉變在於從傳統的伺服器端頁面生成變為客戶端 單頁面應用程式 (SPA)。藉助 Express 仍然可以處理伺服器端的路由與頁面生成，但目前的重點在客戶端檢視上，而 AngularJS 可以實現這一點。這種變化並不僅僅是將 模型-檢視-控制器 (MVC) 工件從伺服器轉移到客戶端。使用者還要嘗試從習慣的同步方式轉而使用基本由事件驅動的、實質上為非同步的方式。或許最重要的一點是，您將從以頁面為中心的應用程式檢視轉到面向元件的檢視。

MEAN 堆疊並非以移動為中心，AngularJS 在桌面電腦、膝上型電腦、智慧手機、平板電腦和甚至是智慧電視上的執行效果都一樣，但它不會把移動裝置當作二等公民對待。而且測試事後不再是問題：藉助世界級的測試框架，比如MochaJS、JasmineJS 和 KarmaJS，您可以為自己的 MEAN 應用程式編寫深入而又全面的測試套件。

準備好獲得 MEAN 了嗎？

回頁首

安裝 Node.js

您需要安裝 Node.js，以便在本系列中的示例應用程式上工作，如果尚未安裝它，那就立刻開始安裝吧。

如果使用 UNIX® 風格的作業系統（Linux、Mac OS X 等），我推薦使用 Node Version Manager (NVM)。（否則，在 Node.js 主頁上單擊Install，下載適合您作業系統的安裝程式，然後接受預設選項即可。）藉助 NVM，您可以輕鬆下載 Node.js，並從命令列切換各種版本。這可以幫助您從一個版本的 Node.js 無縫轉移到下一版本，就像我從一個客戶專案轉到下一個客戶專案一樣。

NVM 安裝完畢後，請輸入命令 nvm ls-remote 檢視哪些 Node.js 版本可用於安裝，如清單 1 中所示。

清單 1. 使用 NVM 列出可用的 Node.js 版本

$ nvm ls-remote

v0.10.20

v0.10.21
v0.10.22
v0.10.23
v0.10.24
v0.10.25
v0.10.26
v0.10.27
v0.10.28

輸入 nvm ls 命令可以顯示本地已經安裝的 Node.js 版本，以及目前正在使用中的版本。

在撰寫本文之際，Node 網站推薦 v0.10.28 是最新的穩定版本。輸入 nvm install v0.10.28 命令在本地安裝它。

安裝 Node.js 後（通過 NVM 或平臺特定的安裝程式均可），可以輸入 node --version 命令來確認當前使用的版本：

$ node --version

v0.10.28

回頁首

什麼是 Node.js？

Node.js 是一種 headless JavaScript 執行時。它與執行在 Google Chrome 內的 JavaScript 引擎（名叫 V8）是一樣的，但使用 Node.js 可以從命令列（而非瀏覽器）執行 JavaScript。

訪問瀏覽器的開發人員工具

熟悉自己所選瀏覽器中的開發人員工具。我將在整個系列中通篇使用 Google Chrome，但使用者可以自行選擇使用 Firefox、Safari 或者甚至是 Internet Explorer。

• 在 Google Chrome 中，單擊 Tools > JavaScript Console。
• 在 Firefox 中，單擊 Tools > Web Developer > Browser Console。
• 在 Safari 中，單擊 Develop > Show Error Console。（如果看不到 Develop 選單，可以在 Advanced preferences 頁面上單擊 Show Develop menu in menu bar。）
• 在 Internet Explorer 中，單擊 Developer Tools > Script > Console。

我曾有些學生嘲笑過從命令列執行 JavaScript 的主意：“如果沒有要控制的 HTML，那 JavaScript 還有什麼好處呢？" JavaScript 是在瀏覽器（Netscape Navigator 2.0）中來到這個世界的，因此那些反對者的短視和天真是可以原諒的。

事實上，JavaScript 程式語言並未針對 文件物件模型 (DOM) 操作或形成 Ajax 請求提供本地功能。該瀏覽器提供了 DOM API，可以方便使用者使用 JavaScript 來完成這類工作，但在瀏覽器之外的地方，JavaScript 不具備這些功能。

下面給出了一個例子。在瀏覽器中開啟一個 JavaScript 控制檯（參見 訪問瀏覽器的開發人員工具）。輸入 navigator.appName。獲得響應後，請輸入 navigator.appVersion。得到的結果類似於圖 1 中所示。

圖 1. 在 Web 瀏覽器中使用 JavaScript navigator 物件

在圖 1 中，Netscape 是對 navigator.appName 的響應，而對 navigator.appVersion 的響應則是經驗豐富的 Web 開發人員已經熟知但愛恨不一的、神祕的開發人員代理字串。在圖 1 中（截自 OS X 上的 Chrome 瀏覽器），該字串是 5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36。

現在，我們要建立一個名為 test.js 的檔案。在檔案中輸入同樣的命令，並將每個命令包含在 console.log() 呼叫中：

console.log(navigator.appName);
console.log(navigator.appVersion);

儲存檔案並輸入 node test.js 來執行它，如清單 2 中所示。

清單 2. 檢視 Node.js 中的 navigator is not defined 錯誤

$ node test.js 

/test.js:1
ion (exports, require, module, __filename, __dirname) { console.log(navigator.
                                                                    ^
ReferenceError: navigator is not defined
    at Object.<anonymous> (/test.js:1:75)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

正如您看到的那樣，navigator 在瀏覽器中可用，但在 Node.js 中不可用。（不好意思，讓您的第一個 Node.js 指令碼失敗了，但我想確保讓您相信，在瀏覽器中執行 JavaScript 與在 Node.js 中執行它是不同的。）

根據堆疊跟蹤的情況，正確的 Module 沒有得到載入。（Modules 是在瀏覽器中執行 JavaScript 與在 Node.js 中執行它之間的另一主要區別。我們將立刻講述 Modules 的更多相關內容。）為了從 Node.js 獲得類似的資訊，請將 test.js 的內容修改為：

console.log(process.versions)
console.log(process.arch)
console.log(process.platform)

再次輸入 node test.js，可以看到類似於清單 3 中的輸出。

清單 3. 在 Node.js 中使用過程模組

$ node test.js
 
{ http_parser: '1.0',
  node: '0.10.28',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.27',
  zlib: '1.2.3',

  modules: '11',
  openssl: '1.0.1g' }
x64
darwin

在 Node.js 中成功執行第一個指令碼之後，我們將接觸下一個主要概念：模組。

回頁首

什麼是模組？

可以在 JavaScript 中建立單一功能的函式，但與在 Java、Ruby 或 Perl 中不同，無法將多個函式打包到一個能夠匯入匯出的內聚模組或 ”包“ 中。當然，使用 <script> 元素可以包含任意 JavaScript 原始碼檔案，但這種歷史悠久的方法在兩個關鍵方面缺少正確的模組宣告。

首先，使用 <script> 元素包含的任意 JavaScript 將被載入到全域性名稱空間中。使用模組可以匯入的函式被封裝在一個區域性命名的變數中。其次，同時更為關鍵的是，可以使用模組顯式地宣告依賴關係，而使用 <script> 元素則做不到這一點。結果，匯入 Module A 時也會同時匯入依賴的 Modules B 和 C。當應用程式變得複雜時，傳遞依賴關係管理很快將成為一種關鍵需求。

CommonJS

顧名思義，CommonJS 專案定義了一種通用的模組格式（包括其他瀏覽器之外的 JavaScript 規範）。Node.js 屬於眾多非官方的 CommonJS 實現之一。RingoJS （類似於 Node.js 的一種應用伺服器，執行在 JDK 上的 Rhino/Nashorn JavaScript 執行時之上) 基於 CommonJS，流行的 NoSQL 持久儲存 CouchDB 和 MongoDB 也是如此。

模組是使用者衷心期盼的下一 JavaScript 主要版本 (ECMAScript 6) 的功能，但直到該版本被廣泛接受之前，Node.js 目前使用的是它自己基於 CommonJS 規範的模組版本。

使用 require 關鍵字可以在指令碼中包含 CommonJS 模組。例如，清單 4 是對 Node.js 主頁上的 Hello World 指令碼稍微進行修改後的版本。建立一個名為 example.js 的檔案，並將清單 4 中的程式碼複製到其中。

清單 4. Node.js 中的 Hello World

var http = require('http');
var port = 9090;
http.createServer(responseHandler).listen(port);
console.log('Server running at http://127.0.0.1:' + port + '/');

function responseHandler(req, res){
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<html><body><h1>Hello World</h1></body></html>');
}

輸入 node example.js 命令執行新的 Web 伺服器，然後在 Web 瀏覽器中訪問 http://127.0.0.1:9090。

看一看清單 4 中的頭兩行。您很可能寫過幾百次（或幾千次）像 var port = 9090; 這樣的簡單語句。這條語句定義了一個名為 port 的變數，並將數字 9090 賦值給它。第一行 (var http = require('http');) 用於匯入一個 CommonJS 模組。它引入 http 模組並將它指派給一個區域性變數。 and assigns it to a local variable. All of the corresponding modules that http 依賴的所有對應模組也同時被 require 語句匯入。

example.js 後面的程式碼行：

1. 建立一個新的 HTTP 伺服器。
2. 指定一個函式來處理響應。
3. 開始監聽指定埠上進入的 HTTP 請求。

這樣通過寥寥幾行 JavaScript 程式碼，就可以在 Node.js 中建立了一個簡單的 Web 伺服器。在本系列隨後的文章中您會看到，Express 將這個簡單的例子被擴充套件用於處理更為複雜的路由，同時還將提供靜態與動態生成的資源。

http 模組是 Node.js 安裝的標準組件之一。其他標準的 Node.js 模組還支援檔案 I/O，讀取來自使用者的命令列輸入，處理底層的 TCP 和 UDP 請求等等。訪問 Node.js 文件的 Modules 部分，檢視標準模組的完整列表並瞭解它們的功能。

儘管模組列表內容十分豐富，但與可用的第三方模組列表相比，仍然是小巫見大巫。要訪問它們，您需要熟悉另一個命令列實用工具：NPM。

回頁首

什麼是 NPM？

NPM 是 Node Packaged Modules 的簡寫。要檢視包含超過 75,000 個公用第三方 Node 模組的清單，請訪問 NPM 網站。在網站上搜索 yo 模組。圖 2 顯示了搜尋結果。

圖 2. yo 模組的詳細情況

結果頁面簡要介紹了該模組（搭建 Yeoman 專案的 CLI 工具），並顯示它在過去一天、一週和一月內被下載的次數、編寫該模組的作者、它依賴於哪些其他的模組（如果存在）等內容。最重要的是，結果頁面給出了安裝該模組的命令列語法。

要從命令列獲取關於 yo 模組的類似資訊，請輸入 npm info yo 命令。（如果您還不知道模組的官方名稱，可以輸入 npm search yo 來搜尋名稱中包含字串 yo 的所有模組。）npm info 命令顯示模組的 package.json 檔案的內容。

瞭解 package.json

每個 Node.js 模組都必須關聯一個格式良好的 package.json 檔案，因此，熟悉此檔案的內容是值得的。清單 5、清單 6 和清單 7 分三部分顯示了 yo 模組的 package.json 檔案的內容。

如清單 5 中所示，第一個元素通常是 name、description 和一個可用 versions 的 JSON 陣列。

清單 5. package.json，第 1 部分

$ npm info yo

{ name: 'yo',
  description: 'CLI tool for scaffolding out Yeoman projects',
  'dist-tags': { latest: '1.1.2' },
  versions: 
   [ 
     '1.0.0',
     '1.1.0',
     '1.1.1',
     '1.1.2' ],

要安裝一個模組的最新版本，請輸入 npm install package 命令。輸入 npm install package@version 可以安裝一個特定的版本。

如清單 6 中所示，接下來將顯示作者、維護者和可以直接查詢原始檔的 GitHub 庫。

清單 6. package.json，第 2 部分

author: 'Chrome Developer Relations',
repository: 
 { type: 'git',
   url: 'git://github.com/yeoman/yo' },
homepage: 'http://yeoman.io',
keywords: 
 [ 'front-end',
   'development',
   'dev',
   'build',
   'web',
   'tool',
   'cli',
   'scaffold',
   'stack' ],

在這個例子中，還可以看到一個指向專案主頁的連結和一個相關關鍵字的 JSON 陣列。並非所有 package.json 檔案中都會出現所有這些欄位，但使用者很少會抱怨與一個專案相關的元資料太多。

最後，清單 7 中列出了附有顯式版本號的依賴關係。這些版本號符合主版本.次版本.補丁版本的常用模式，被稱為 SemVer（語義版本控制）。

清單 7. package.json，第 3 部分

engines: { node: '>=0.8.0', npm: '>=1.2.10' },
dependencies: 
 { 'yeoman-generator': '~0.16.0',
   nopt: '~2.1.1',
   lodash: '~2.4.1',
   'update-notifier': '~0.1.3',
   insight: '~0.3.0',
   'sudo-block': '~0.3.0',
   async: '~0.2.9',
   open: '0.0.4',
   chalk: '~0.4.0',
   findup: '~0.1.3',
   shelljs: '~0.2.6' },
peerDependencies: 
 { 'grunt-cli': '~0.1.7',
   bower: '>=0.9.0' },
devDependencies: 
 { grunt: '~0.4.2',
   mockery: '~1.4.0',
   'grunt-contrib-jshint': '~0.8.0',
   'grunt-contrib-watch': '~0.5.3',
   'grunt-mocha-test': '~0.8.1' },

這個 package.json 檔案表明，它必須安裝在 0.8.0 或更高版本的 Node.js 例項上。如果試圖使用 npm install 命令安裝一個不受支援的版本，那麼安裝將會失敗。

SemVer 的快捷語法

在 清單 7 中，您會注意到，很多依賴關係版本中都有一個波浪符號 (~)。這個符號相當於 1.0.x（也屬於有效語法），意思是 ”主版本必須是 1，次版本必須是 0，但您可以安裝所能找到的最新補丁版本“。SemVer 中的這種隱含表達法意味著，補丁版本絕不會 對 API 做出重大修改（通常是對現有功能的缺陷修復），而次版本會在不打破現有功能的情況下引入另外的功能（比如新的函式呼叫）。

除了平臺要求之外，這個 package.json 檔案還提供幾個依賴關係列表：

• dependencies 部分列出了執行時的依賴關係。
• devDependencies 部分列出了開發過程中需要的模組。
• peerDependencies 部分支援作者定義專案之間的 ”對等“ 關係。這種功能通常用於指定基礎專案與其外掛之間的關係，但在這個例子中，它指出了包含 Yeoman 專案與 Yo 的其他兩個專案（Grunt 與 Bower）。

如果在不指定模組名的情況下輸入 npm install 命令，那麼 npm 會訪問當前目錄中的 package.json 檔案，並安裝我剛剛討論過的三部分內容中列出的所有依賴關係。

安裝一個能正常工作的 MEAN 堆疊，下一步是安裝 Yeoman 與相應的 Yeoman-MEAN 生成器。

回頁首

安裝 Yeoman

作為一名 Java 開發人員，我無法想象在沒有諸如 Ant 或 Maven 這樣的編譯系統的情況下如何啟動一個新專案。類似地，Groovy 和 Grails 開發人員依靠的是 Gant（Ant 的一種 Groovy 實現）或 Gradle。這些工具可以搭建起一個新的目錄結構，動態下載依賴關係，並準備好將專案釋出。

在純粹的 Web 開發環境中，Yeoman 可以滿足這種需要。Yeoman 是三種 Node.js 工具的集合，包括用於搭建的純 JavaScript 工具 Yo，管理客戶端依賴關係的 Bower，以及準備專案釋出的 Grunt。通過分析 清單 7 可以得出這樣的結論：安裝 Yo 時也會安裝它對等的 Grunt 和 Bower，這要感謝 package.json 中的 peerDependencies 部分。

通常，輸入 npm install yo --save 命令可以安裝 yo 模組並更新 package.json 檔案中的 dependencies 部分。（npm install yo --save-dev 用於更新 devDependencies 部分。）但這三個對等的 Yeoman 模組算不上是特定於專案的模組，它們是命令列實用工具，而非執行時依賴關係。要全域性安裝一個 NPM 包，需要在 install 命令後增加一個 -g 標誌。

在系統上安裝 Yeoman：

npm install -g yo

在完成包安裝後，輸入 yo --version 命令來驗證它已經在執行中。

Yeoman 與基礎架構的所有餘下部分都準備就緒後，便可以開始安裝 MEAN 堆疊了。

回頁首

安裝 MeanJS

您可以手動安裝 MEAN 堆疊的每一部分，但需要十分小心。謝天謝地，Yeoman 通過其 generators（生成器） 提供了一種更輕鬆的安裝方式。

Yeoman 生成器就是引導一個新 Web 專案更輕鬆的方式。該生成器提供了基礎包及其所有依賴關係。此外，它通常還會包含一個工作的編譯指令碼及其所有相關外掛。通常，該生成器還包含一個示例應用程式，包括測試在內。

您將用於引導第一個 MEAN 應用程式的社群生成器被稱為 MEAN.JS，這也在意料之中。

在 MEAN.JS 主頁上，單擊 Yo Generator 選單選項或者直接訪問 Generator 頁面，圖 3 中顯示了其中的一部分。

圖 3. MEAN.JS Yeoman 生成器

該頁面上的說明指出要首先 Yeoman，這一點您已經完成。下一步是全域性安裝 MEAN.JS 生成器：