Angular2 中的依賴包詳解

轉自：http://blog.csdn.net/feiying008/article/details/53033704

目錄

1. dependencies 和 devDependencies
2. dependencies
1. 特性包
2. 填充 Polyfill 包
3. 其它輔助庫
3. devDependencies
4. 爲何使用 peerDependencies 
1. 咱們必須本身安裝 Angular 的 peerDependencies 
1. PEERDEPENDENCIES 的將來

 

Angular 應用程序以及 Angular 自己都依賴於不少第三方包 ( 包括 Angular 本身 ) 提供的特性和功能。這些包由 Node 包管理器 (npm) 負責安裝和維護。

Angular2開發時依賴的包在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",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

 

dependencies 和 devDependencies

 

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

dependencies 下的這些包是 運行 本應用的基礎，而 devDependencies 下的只在 開發 此應用時才用獲得。 經過爲 install 命令添加 --production 參數，你在產品環境下安裝時排除 devDependencies 下的包，就像這樣：

npm install my-application --production

 

dependencies

應用程序的 package.json 文件中， dependencies 區下有三類包：

• 特性 - 特性包爲應用程序提供了框架和工具方面的能力。

• 填充 (Polyfills) - 填充包彌合了不一樣瀏覽器上的 JavaScript 實現方面的差別。

• 其它 - 其它庫對本應用提供支持，好比 bootstrap 包提供了 HTML 中的小部件和樣式。

 

特性包

@angular/core - 框架中關鍵的運行期部件，每個應用都須要它。 包括全部的元數據裝飾器： Component 、 Directive ，依賴注入系統，以及組件生命週期鉤子。

@angular/core - Critical runtime parts of the framework needed by every application. Includes all metadata decorators, Component,Directive, dependency injection, and the component lifecycle hooks.

@angular/common - 經常使用的那些由 Angular 開發組提供的服務、管道和指令。

@angular/compiler - Angular 的 模板編譯器 。 它會理解模板，而且把模板轉化成代碼，以供應用程序運行和渲染。 開發人員一般不會直接跟這個編譯器打交道，而是經過 platform-browser-dynamic 或離線模板編譯器間接使用它。

@angular/platform-browser - 與 DOM 和瀏覽器相關的每樣東西，特別是幫助往 DOM 中渲染的那部分。 這個包還包含 bootstrapStatic 方法，用來引導那些在產品構建時須要離線預編譯模板的應用程序。

@angular/platform-browser-dynamic - 爲應用程序提供一些 提供商 和 bootstrap 方法，以便在客戶端編譯模板。不要用於離線編譯。 咱們使用這個包在開發期間引導應用，以及引導 plunker 中的範例。

@angular/http - Angular 的 HTTP 客戶端。

@angular/router - 路由器。

@angular/upgrade - 一組用於升級 Angular 1 應用的工具。

system.js - 是一個動態的模塊加載器， 與 ES2015 模塊 規範兼容。 還有不少其它選擇，好比廣受歡迎的 webpack 。 SystemJS 被用在了咱們的文檔範例中。由於它能工做。

從此，應用程序極可能還會須要更多的包，好比 HTML 控件、主題、數據訪問，以及其它多種工具。

 

填充 (Polyfill) 包

在應用程序的運行環境中， Angular 須要某些 填充庫 。 咱們經過特定的 npm 包來安裝這些填充庫， Angular 自己把它列在了package.json 中的 peerDependencies 區。

但咱們必須把它列在咱們 package.json 文件的 dependencies 區。

查看下面的「 爲何用 peerDependencies? 」，以瞭解這項需求的背景。

core-js - 爲全局上下文 (window) 打的補丁，提供了 ES2015(ES6) 的不少基礎特性。 咱們也能夠把它換成提供了相同內核 API 的其它填充庫。 一旦全部的「主流瀏覽器」都實現了這些 API ，這個依賴就能夠去掉了。

reflect-metadata - 一個由 Angular 和 TypeScript 編譯器共享的依賴包。 開發人員須要能單獨更新 TypeScript 包，而不用升級 Angular 。這就是爲何把它放在本應用程序的依賴中，而不是 Angular 的依賴中。

rxjs - 一個爲 可觀察對象 (Observable) 規範 提供的填充庫，該規範已經提交給了 TC39 委員會，以決定是否要在 JavaScript 語言中進行標準化。 開發人員應該能在兼容的版本中選擇一個喜歡的 rxjs 版本，而不用等 Angular 升級。

zone.js - 一個爲 Zone 規範 提供的填充庫，該規範已經提交給了 TC39 委員會，以決定是否要在 JavaScript 語言中進行標準化。 開發人員應該能在兼容的版本中選擇一個喜歡的 zone.js 版本，而不用等 Angular 升級。

 

其它輔助庫

angular-in-memory-web-api - 一個 Angular 的支持庫，它能模擬一個遠端服務器的 Web API ，而不須要依賴一個真實的服務器或發起真實的 HTTP 調用。 對演示、文檔範例和開發的早期階段 ( 那時候咱們可能尚未服務器呢 ) 很是有用。 請到 Http 客戶端 一章中瞭解更多知識。

bootstrap - bootstrap 是一個廣受歡迎的 HTML 和 CSS 框架，可用來設計響應式網絡應用。 有些文檔中的範例使用了 bootstrap 來強化它們的外觀。

 

devDependencies

列在 package.json 文件中 devDependencies 區的包會幫助咱們開發該應用程序。 咱們不用把它們部署到產品環境的應用程序中——雖然這樣作也沒什麼壞處。

concurrently - 一個用來在 OS/X 、 Windows 和 Linux 操做系統上同時運行多個 npm 命令的工具

lite-server - 一個輕量級、靜態的服務器， 由 John Papa 開發和維護。對使用到路由的 Angular 程序提供了很好的支持。

typescript - TypeScript 語言的服務器，包含了 TypeScript 編譯器 tsc 。

@types/* - 「 TypeScript 定義」文件管理器。 要了解更多，請參見 TypeScript 配置 頁。

 

爲何使用 peerDependencies ？

在「快速起步」的 package.json 文件中，並無 peerDependencies 區。 可是 Angular 自己在 它本身的 package.json 中有， 它對咱們的應用程序有重要的影響。

它解釋了爲何咱們要在「快速起步」的 package.json 文件中加載這些 填充庫 (polyfill) 依賴包， 以及爲何咱們在本身的應用中會須要它們。

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

每一個包都依賴其它的包，好比咱們的應用程序就依賴於 Angular 包。

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

若是 "A" 和 "B" 依賴於 "C" 的不一樣版本 ("C1" 和 "C2") 。 npm 包管理系統也能支持！ 它會把 "C1" 安裝到 "A" 的 node_modules 目錄下給 "A" 用，把 "C2" 安裝到 "B" 的 node_modules 目錄下給 "B" 用。 如今， "A" 和 "B" 都有了它們本身的一份 "C" 的複本，它們運行起來也互不干擾。

可是有一個問題。包 "A" 可能只須要 "C1" 出現就行，而實際上並不會直接調用它。 "A" 可能只有當 每一個人都使用 "C1" 時 才能正常工做。若是程序中的任何一個部分依賴了 "C2" ，它就會失敗。

要想解決這個問題， "A" 就須要把 "C1" 定義爲它的 平級依賴 。

在 dependencies 和 peerDependencies 之間的區別大體是這樣的：

dependency 說：「我須要這東西 對我 直接可用。」

peerDependency 說：「若是你想使用我，你得先確保這東西 對你 可用」

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

咱們必須本身安裝 Angular 的 peerDependencies 。

當 npm 安裝那些在 咱們的 dependencies 區指定的包時， 它也會同時安裝上在 那些包 的 dependencies 區所指定的那些包。 這個安裝過程是遞歸的。

可是在 npm 的第三版中， 它不會 安裝列在 peerDependencies 區的那些包。

這意味着，當咱們的應用程序安裝 Angular 時， npm 將不會自動安裝列在 Angular 的 peerDependencies 區的那些包

幸運的是， npm 會在下列狀況下給咱們警告： (a) 當任何 平級依賴 缺失時或 (b) 當應用程序或它的任何其它依賴安裝了與 平級依賴 不一樣版本的包時。

這些警告能夠避免由於版本不匹配而致使的意外錯誤。 它們讓咱們能夠控制包和版本的解析過程。

咱們的責任是，把全部 平級依賴 包都 列在咱們本身的 devDependencies 中 。

PEERDEPENDENCIES 的將來

Angular 的填充庫依賴只是一個給開發人員的建議或提示，以便它們知道 Angular 指望用什麼。 它們不該該像如今同樣是硬需求，但目前咱們也不知道該如何把它們設置爲可選的。

不過，有一個 npm 的新特性申請，叫作「可選的 peerDependencies 」，它將會容許咱們更好的對這種關係建模。 一旦它被實現了， Angular 將把全部填充庫從 peerDependencies 區切換到 optionalPeerDependencies 區。