如何优雅升级ng2项目

说明

这里的升级不是指ng1如何升级到ng2,仅使用ng2为栗子,说明,如何升级一个现有的项目。如果想看下如何从ng1升级到ng2,一定要关注Angular中文社区 (微信号: angularcn)其中 从ng1到ng2的平滑升级 就是答案!

问题

项目经过迭代,package文件中的依赖库有可能不是最新的,为及时更新依赖库,就需要修改package中的版本号。但是,有些依赖又会依赖其他的依赖库,如果仅仅是简单的更新某个依赖库到最新版本,极有可能出现 peer Dependencies 错误。那该如何处理这个问题呢? 稳步推进!

package依赖包版本

在讲解如何升级之前,先来了解下npm管理依赖包中存在的几个标点符号。

只有版本号

package.json中,版本号如下:
"@angular/core": "2.0.1" ====> 安装指定版本

符号 ^

举栗子: "@angular/core": "^2.0.1"
====> 安装该版本以及比该版本更新的版本, 如: 2.0.1 , 2.0.2, 2.1.0, 2.7.0
但是,3开头的不可以

符号 ~

举栗子: "@angular/core": "~2.0.1"
====> 只能安装 2.0.1, 2.0.2, 。。。。 2.0.9
但是, 2.1.0不可以

符号 >= <=

更有者,可以使用如下形式: >= ... <=
"@angular/core": ">=2.0.1<=3.0.0"

常用npm升级命令

以ng2的ng2-starter-webpack项目为例子说明,如何优雅升级ng2相关版本。
package.json 文件内容:

"dependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.1",
    "@angular/upgrade": "2.0.1",
    "angular-in-memory-web-api": "0.1.1",
    "bootstrap": "3.3.5",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.6",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.23"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.24.1",
    "ts-loader": "^0.9.5",
    "typescript": "^2.0.6",
    "typings": "^1.5.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }

很显然,ng2的库不是最新的,那么想升级到最新的库,而且不让他们出现error, 这就需要如下步骤。注意,如果按照上面的package.json文件,npm install会出现问题,莫慌,故意为之!

`-- UNMET PEER DEPENDENCY zone.js@0.6.23

原因是 故意降低了 zone.js的版本,正确版本是 0.6.25

npm list --depth 0

简单查看 依赖库 的信息.

$ npm list --depth 0
ng2-starter-webpack@0.0.1 E:\Project_Dev\Angularjs2\ng2-starter-webpack
+-- @angular/common@2.0.1
+-- @angular/compiler@2.0.1
+-- @angular/core@2.0.1
+-- @angular/forms@2.0.1
+-- @angular/http@2.0.1
+-- @angular/platform-browser@2.0.1
+-- @angular/platform-browser-dynamic@2.0.1
+-- @angular/router@3.0.1
+-- @angular/upgrade@2.0.1
+-- angular-in-memory-web-api@0.1.1
+-- bootstrap@3.3.5
+-- core-js@2.4.1
+-- html-webpack-plugin@2.24.1
+-- reflect-metadata@0.1.6
+-- rxjs@5.0.0-beta.12
+-- ts-loader@0.9.5
+-- typescript@2.0.10
+-- typings@1.5.0
+-- webpack@1.13.3
+-- webpack-dev-server@1.16.2
`-- UNMET PEER DEPENDENCY zone.js@0.6.23

npm ERR! peer dep missing: zone.js@^0.6.25, required by angular-in-memory-web-api@0.1.1

注意,其中的npm Error: angular-in-memory-web-api@0.1.1需要的zone.js版本是 0.6.25, 所以导致出现了错误,这就是常见的 peer dependencies 问题。

npm ERR! peer dep missing: zone.js@^0.6.25, required by angular-in-memory-web-api@0.1.1

只要修改为正确的版本后,就不会出现问题了。

npm outdated

该命令是查询当前package中有哪些依赖库是过时了的。 结果如下

$ npm outdated
Package                                  Current         Wanted      Latest  Location
@angular/common                            2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/compiler                          2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/core                              2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/forms                             2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/http                              2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/platform-browser                  2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/platform-browser-dynamic          2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/router                            3.0.1          3.0.1       3.2.0  ng2-starter-webpack
@angular/upgrade                           2.0.1          2.0.1       2.2.0  ng2-starter-webpack
angular-in-memory-web-api                  0.1.1          0.1.1      0.1.15  ng2-starter-webpack
bootstrap                                  3.3.5          3.3.5       3.3.7  ng2-starter-webpack
reflect-metadata                           0.1.6          0.1.6       0.1.8  ng2-starter-webpack
rxjs                               5.0.0-beta.12  5.0.0-beta.12  5.0.0-rc.3  ng2-starter-webpack
ts-loader                                  0.9.5          0.9.5       1.2.1  ng2-starter-webpack
typescript                                2.0.10          2.1.1      2.0.10  ng2-starter-webpack
typings                                    1.5.0          1.5.0       2.0.0  ng2-starter-webpack
zone.js                                   0.6.25         0.6.25      0.6.26  ng2-starter-webpack

一目了然,当前的version, 最新的version。

不要猴急把package中的版本号都替换为最新的,要考虑依赖的问题。ng2的core库依赖rxjs.js, zone.js, 把ng2升级到2.2.0,是否有必要把rxjs 或 zone.js升级为最新的版本呢? 也不一定。

npm view xxxpackage/xxx@x.x.x peerDependencies

该命令告诉我们,具体某个依赖包 的依赖关系。

$ npm view @angular/core@2.2.0 peerDependencies
{ rxjs: '5.0.0-beta.12', 'zone.js': '^0.6.21' }

以查看 @angular/core@2.2.0 为例,它依赖 ** { rxjs: '5.0.0-beta.12', 'zone.js': '^0.6.21' } , 也就是说升级@angular/core** 到 ** 2.2.0 ** 没有必要升级rxjs, zone.js版本,及时他们有更新的版本。

再看一个依赖库: ** angular-in-memory-web-api@0.1.1 **

$ npm view angular-in-memory-web-api@0.1.1  peerDependencies

{ '@angular/core': '^2.0.0',
  '@angular/http': '^2.0.0',
  'reflect-metadata': '^0.1.3',
  rxjs: '5.0.0-beta.12',
  'zone.js': '^0.6.25' }

以上说明,当升级ng2相关库为 2.2.0的时候,可以不用升级 ** angular-in-memory-web-api@0.1.1 **

但是,修改完成 ng相关库为 2.2.0后,再次执行 npm install, 还是有错误

$ npm list --depth 0
ng2-starter-webpack@0.0.1 E:\Project_Dev\Angularjs2\ng2-starter-webpack
+-- UNMET PEER DEPENDENCY @angular/common@2.2.0
+-- @angular/compiler@2.2.0
+-- UNMET PEER DEPENDENCY @angular/core@2.2.0
+-- @angular/forms@2.2.0
+-- @angular/http@2.2.0
+-- UNMET PEER DEPENDENCY @angular/platform-browser@2.2.0
+-- @angular/platform-browser-dynamic@2.2.0
+-- @angular/router@3.0.1
+-- @angular/upgrade@2.2.0
+-- angular-in-memory-web-api@0.1.1
+-- bootstrap@3.3.5
+-- core-js@2.4.1
+-- html-webpack-plugin@2.24.1
+-- reflect-metadata@0.1.6
+-- rxjs@5.0.0-beta.12
+-- ts-loader@0.9.5
+-- typescript@2.0.10
+-- typings@1.5.0
+-- webpack@1.13.3
+-- webpack-dev-server@1.16.2
`-- zone.js@0.6.25

npm ERR! peer dep missing: @angular/common@2.0.1, required by @angular/router@3.0.1
npm ERR! peer dep missing: @angular/core@2.0.1, required by @angular/router@3.0.1
npm ERR! peer dep missing: @angular/platform-browser@2.0.1, required by @angular/router@3.0.1

本次是angular/router的版本太低了,@3.0.1 要求ng相关库是2.0.1, 2.2.0无法使用,所以需要升级angular/router 为3.2.0

小结

升级版本是个细致的活儿,需要按照科学的方法来做。否则容易出现各种问题,脑壳都会抓掉。小结升级会使用到的命令吧! 总结为一句话: 看版本,查依赖,修json,重复几次

step 1 看版本

npm outdated

step 2 查看依赖

npm view xxxpackage/xxx@x.x.x peerDependencies

step 3 修改相关版本

step 4 重复来几次

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,898评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,401评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,058评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,539评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,382评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,319评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,706评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,370评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,664评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,326评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,730评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2 335

推荐阅读更多精彩内容