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 区。