Angular应用和Angular自身依赖者很多第三方包,这些软件包的维护和安装都通过NPM来管理。Angualr建议利用快速入门的package.json做为基础。

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.0",
    "@angular/compiler": "2.0.0-rc.0",
    "@angular/core": "2.0.0-rc.0",
    "@angular/http": "2.0.0-rc.0",
    "@angular/platform-browser": "2.0.0-rc.0",
    "@angular/platform-browser-dynamic": "2.0.0-rc.0",
    "@angular/router-deprecated": "2.0.0-rc.0",
    "@angular/upgrade": "2.0.0-rc.0",
    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.5",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1"
  }
}

npm有非常丰富的第三方包可以选择,我们可以增加和减少来满足应该需求。接下来解释这些包是什么意思、干什么用的。

一、dependencies和devDependencies节点

package.json 将依赖分成dependencies和devDependencies。前者是运行应用程序所需要包;后者是开发应用所需要包,可以在部署生产环境时除掉。

npm install my-application --production

二、依赖

package.jsondependencies 节点的依赖包分为三种类型:

  • 功能 功能包提供我们的应用框架和实用功能。
  • Polyfills Polyfills 插件消除JavaScript在各浏览器上的差异。
  • 其它 其它第三方库,比如:bootstrap

1、功能包

@angular/core – 应用程序所需要的关键运行库,包括所有元数据装饰器、ComponentDirective、依赖注入以及组件生命周期钩子。

@angular/common – Angular提供常用Service、管道和指令(表单)。

@angular/compiler – Angular模板编译器。

@angular/platform-browser – 有关DOM与浏览器相关的一切,尤其是帮助DOM渲染。包还包括引导应用启动方法,以及预编译模板方法。

@angular/platform-browser-dynamic – 动态编译?

**@angular/http ** – Angular Http客户端。

@angular/router – 组件路由。

@angular/upgrade – 用于升级1.x至2的实用工具集。

system.js – 兼容ES2015模块规范的动态模块加载器,也可以选择其他库代替,例如Webpack。SystemJS恰好是我们所有系列中的示例样本。

2、Polyfills 插件

Angular应用环境需要一些polyfills,这些polyfills列表都放在 dependencies 节点当中。

es6-shim – ES6引擎,用于解决低浏览器版本的一些ES6特性,不过一般只是在开发时会用它来做API转换,实现部署时这些东西应该都是移除的。

reflect-metadata – 一个依赖在Angular和TypeScript中间的元数据编译器。

rxjs – 一种利用 Observables 流的异步编程接口。

zone.js – 用于解决异步任务之间的持久性传递,2.x的事件绑定诸如 (click) 而无须像 1.x 中还要定义一个 ngClick 指令,这里面 zone 功不可没。

3、其它辅助库

bootstrap – 不用多话,最常用的HTML和CSS框架。

angular2-in-memory-web-api – 之前示例有出现过,用于模拟一个远程WEB API服务接口,用在测试上蛮方便的。

三、devDependencies

package.jsondevDependencies 节点列出的包是帮助我们开发应用,不需要被部署到生产环境中,

concurrently 一个同时运行多个 npm 命令的实用工具(支持os/x,Windows,Linus)

lite-server 一个轻型的静态文件服务器。

typescript TypeScript编译器。

typings TypeScript定义文件的管理器。

当然还有一些像测试和构建等工具也是放在这里。

四、总结

其实Angular2利用了在大量第三方库,好好的认知这些库对学习Angualr2非常有帮助。对于devDependencies节点,如何去构建一套便于团队开发的项目样本,就需要对各种测试、构建工具非常熟悉。

官网文章还有一小节是介绍 peerDependencies 节点,它是为了解决一些库的兼容性依赖问题,在我们目前接触的示例中从未体现过,但是在Angular源代码中有该节点。可在我写文章时,目前最新的源代码已经没有这个节点,我猜想可能是因为 npm3.x 的关系,因为npm3解决一个路径深度的问题。