Angular 應(yīng)用程序以及 Angular 本身都依賴于很多第三方包 ( 包括 Angular 自己 ) 提供的特性和功能。這些包由 Node 包管理器 (npm) 負(fù)責(zé)安裝和維護(hù)。

Angular2開發(fā)時依賴的包在package.json文件中都有定義。

{ 
  “dependencies”: { 
    “@angular/common”: “~2.1.1”, 
    “@angular/compiler”: “~2.1.1”, 
    “@angular/core”: “~2.1.1”, 
    “@angular/forms”: “~2.1.1”, 
    “@angular/http”: “~2.1.1”, 
    “@angular/platform-browser”: “~2.1.1”, 
    “@angular/platform-browser-dynamic”: “~2.1.1”, 
    “@angular/router”: “~3.1.1”, 
    “@angular/upgrade”: “~2.1.1”, 
    “angular-in-memory-web-api”: “~0.1.13”, 
    “core-js”: “^2.4.1”, 
    “reflect-metadata”: “^0.1.8”, 
    “rxjs”: “5.0.0-beta.12”, 
    “systemjs”: “0.19.39”, 
    “zone.js”: “^0.6.25” 
  }, 
  “devDependencies”: { 
    “@types/core-js”: “^0.9.34”, 
    “@types/node”: “^6.0.45”, 
    “concurrently”: “^3.0.0”, 
    “l(fā)ite-server”: “^2.2.2”, 
    “typescript”: “^2.0.3” 
  } 
} 

package.json 包含兩組包： dependencies 和 devDependencies 。

dependencies

dependencies 下的這些包是 運行 本應(yīng)用的基礎(chǔ)，而 devDependencies 下的只在 開發(fā) 此應(yīng)用時才用得到。 通過為 install 命令添加 –production 參數(shù)，你在產(chǎn)品環(huán)境下安裝時排除 devDependencies 下的包，就像這樣：

npm install my-application –production 

應(yīng)用程序的 package.json 文件中， dependencies 區(qū)下有三類包：

• 特性 - 特性包為應(yīng)用程序提供了框架和工具方面的能力。
• 填充 (Polyfills) - 填充包彌合了不同瀏覽器上的 JavaScript 實現(xiàn)方面的差異。
• 其它 - 其它庫對本應(yīng)用提供支持，比如 bootstrap 包提供了 HTML 中的小部件和樣式。

特性包

• @angular/core - 框架中關(guān)鍵的運行期部件，每一個應(yīng)用都需要它。 包括所有的元數(shù)據(jù)裝飾器： Component 、 Directive ，依賴注入系統(tǒng)，以及組件生命周期鉤子。
• @angular/common - 常用的那些由 Angular 開發(fā)組提供的服務(wù)、管道和指令。
• @angular/compiler - Angular 的 模板編譯器 。 它會理解模板，并且把模板轉(zhuǎn)化成代碼，以供應(yīng)用程序運行和渲染。 開發(fā)人員通常不會直接跟這個編譯器打交道，而是通過 platform-browser-dynamic 或離線模板編譯器間接使用它。
• @angular/platform-browser - 與 DOM 和瀏覽器相關(guān)的每樣?xùn)|西，特別是幫助往 DOM 中渲染的那部分。 這個包還包含 bootstrapStatic 方法，用來引導(dǎo)那些在產(chǎn)品構(gòu)建時需要離線預(yù)編譯模板的應(yīng)用程序。
• @angular/platform-browser-dynamic - 為應(yīng)用程序提供一些 提供商 和 bootstrap 方法，以便在客戶端編譯模板。不要用于離線編譯。 我們使用這個包在開發(fā)期間引導(dǎo)應(yīng)用，以及引導(dǎo) plunker 中的范例。
• @angular/http - Angular 的 HTTP 客戶端。
• @angular/router - 路由器.
• @angular/upgrade - 一組用于升級 Angular 1 應(yīng)用的工具。
• system.js - 是一個動態(tài)的模塊加載器， 與 ES2015 模塊 規(guī)范兼容。 還有很多其它選擇，比如廣受歡迎的 webpack 。 SystemJS 被用在了我們的文檔范例中。因為它能工作。

今后，應(yīng)用程序很可能還會需要更多的包，比如 HTML 控件、主題、數(shù)據(jù)訪問，以及其它多種工具

填充 (Polyfill) 包

在應(yīng)用程序的運行環(huán)境中， Angular 需要某些 填充庫 。 我們通過特定的 npm 包來安裝這些填充庫， Angular 本身把它列在了package.json 中的 peerDependencies 區(qū)。

但我們必須把它列在我們 package.json 文件的 dependencies 區(qū)。

查看下面的“ 為什么用 peerDependencies? ”，以了解這項需求的背景。

• core-js - 為全局上下文 (window) 打的補(bǔ)丁，提供了 ES2015(ES6) 的很多基礎(chǔ)特性。 我們也可以把它換成提供了相同內(nèi)核 API 的其它填充庫。 一旦所有的“主流瀏覽器”都實現(xiàn)了這些 API ，這個依賴就可以去掉了。
• reflect-metadata - 一個由 Angular 和 TypeScript 編譯器共享的依賴包。 開發(fā)人員需要能單獨更新 TypeScript 包，而不用升級 Angular 。這就是為什么把它放在本應(yīng)用程序的依賴中，而不是 Angular 的依賴中。
• rxjs - 一個為 可觀察對象 (Observable) 規(guī)范 提供的填充庫，該規(guī)范已經(jīng)提交給了 TC39 委員會，以決定是否要在 JavaScript 語言中進(jìn)行標(biāo)準(zhǔn)化。 開發(fā)人員應(yīng)該能在兼容的版本中選擇一個喜歡的 rxjs 版本，而不用等 Angular 升級。
• zone.js - 一個為 Zone 規(guī)范 提供的填充庫，該規(guī)范已經(jīng)提交給了 TC39 委員會，以決定是否要在 JavaScript 語言中進(jìn)行標(biāo)準(zhǔn)化。 開發(fā)人員應(yīng)該能在兼容的版本中選擇一個喜歡的 zone.js 版本，而不用等 Angular 升級。

其它輔助庫

• angular-in-memory-web-api - 一個 Angular 的支持庫，它能模擬一個遠(yuǎn)端服務(wù)器的 Web API ，而不需要依賴一個真實的服務(wù)器或發(fā)起真實的 HTTP 調(diào)用。 對演示、文檔范例和開發(fā)的早期階段 ( 那時候我們可能還沒有服務(wù)器呢 ) 非常有用。 請到 Http 客戶端 一章中了解更多知識。
• bootstrap - bootstrap 是一個廣受歡迎的 HTML 和 CSS 框架，可用來設(shè)計響應(yīng)式網(wǎng)絡(luò)應(yīng)用。 有些文檔中的范例使用了 bootstrap 來強(qiáng)化它們的外觀。

devDependencies

列在 package.json 文件中 devDependencies 區(qū)的包會幫助我們開發(fā)該應(yīng)用程序。 我們不用把它們部署到產(chǎn)品環(huán)境的應(yīng)用程序中——雖然這樣做也沒什么壞處。

• concurrently - 一個用來在 OS/X 、 Windows 和 Linux 操作系統(tǒng)上同時運行多個 npm 命令的工具
• lite-server - 一個輕量級、靜態(tài)的服務(wù)器， 由 John Papa 開發(fā)和維護(hù)。對使用到路由的 Angular 程序提供了很好的支持。
• typescript - TypeScript 語言的服務(wù)器，包含了 TypeScript 編譯器 tsc
• @types/* - “TypeScript 定義”文件管理器。 要了解更多，請參見 TypeScript 配置 頁。

為什么使用 peerDependencies ？

在“快速起步”的 package.json 文件中，并沒有 peerDependencies 區(qū)。 但是 Angular 本身在 它自己的 package.json 中有， 它對我們的應(yīng)用程序有重要的影響。

它解釋了為什么我們要在“快速起步”的 package.json 文件中加載這些 填充庫 (polyfill) 依賴包， 以及為什么我們在自己的應(yīng)用中會需要它們。

然后是對 平級依賴 (peer dependencies) 的簡短解釋。

每個包都依賴其它的包，比如我們的應(yīng)用程序就依賴于 Angular 包。

兩個包， “A” 和 “B” ，可能依賴共同的第三個包 “C” 。 “A” 和 “B” 可能都在它們的 dependencies 中列出了 “C” 。

如果 “A” 和 “B” 依賴于 “C” 的不同版本 (“C1” 和 “C2”) 。 npm 包管理系統(tǒng)也能支持！ 它會把 “C1” 安裝到 “A” 的 node_modules 目錄下給 “A” 用，把 “C2” 安裝到 “B” 的 node_modules 目錄下給 “B” 用。 現(xiàn)在， “A” 和 “B” 都有了它們自己的一份 “C” 的復(fù)本，它們運行起來也互不干擾。

但是有一個問題。包 “A” 可能只需要 “C1” 出現(xiàn)就行，而實際上并不會直接調(diào)用它。 “A” 可能只有當(dāng) 每個人都使用 “C1” 時 才能正常工作。如果程序中的任何一個部分依賴了 “C2” ，它就會失敗。

要想解決這個問題， “A” 就需要把 “C1” 定義為它的 平級依賴 。

在 dependencies 和 peerDependencies 之間的區(qū)別大致是這樣的：

dependency 說：“我需要這東西 對我 直接可用?！?/p>

peerDependency 說：“如果你想使用我，你得先確保這東西 對你 可用”

Angular 就存在這個問題。 因此， Angular 的 package.json 中指定了一系列 平級依賴 包， 把每個第三方包都固定在一個特定的版本上。

我們必須自己安裝 Angular 的 peerDependencies 。
當(dāng) npm 安裝那些在 我們的 dependencies 區(qū)指定的包時， 它也會同時安裝上在 那些包 的 dependencies 區(qū)所指定的那些包。 這個安裝過程是遞歸的。

但是在 npm 的第三版中， 它不會 安裝列在 peerDependencies 區(qū)的那些包。

這意味著，當(dāng)我們的應(yīng)用程序安裝 Angular 時， npm 將不會自動安裝列在 Angular 的 peerDependencies 區(qū)的那些包

幸運的是， npm 會在下列情況下給我們警告： (a) 當(dāng)任何 平級依賴 缺失時或 (b) 當(dāng)應(yīng)用程序或它的任何其它依賴安裝了與 平級依賴 不同版本的包時。

這些警告可以避免因為版本不匹配而導(dǎo)致的意外錯誤。 它們讓我們可以控制包和版本的解析過程。

我們的責(zé)任是，把所有 平級依賴 包都 列在我們自己的 devDependencies 中 。

PEERDEPENDENCIES 的未來

Angular 的填充庫依賴只是一個給開發(fā)人員的建議或提示，以便它們知道 Angular 期望用什么。 它們不應(yīng)該像現(xiàn)在一樣是硬需求，但目前我們也不知道該如何把它們設(shè)置為可選的。

不過，有一個 npm 的新特性申請，叫做“可選的 peerDependencies ”，它將會允許我們更好的對這種關(guān)系建模。 一旦它被實現(xiàn)了， Angular 將把所有填充庫從 peerDependencies 區(qū)切換到 optionalPeerDependencies 區(qū)。

轉(zhuǎn)自CSDN