本文首发简书http://www.jianshu.com/p/b583e6bc6139,欢迎转载,但请注明转载链接,谢谢!
说明
这里的升级不是指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"@H_403_54@: {
"@angular@H_403_54@/common"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/compiler"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/core"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/forms"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/http"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/platform-browser"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/platform-browser-dynamic"@H_403_54@: "2.0.1"@H_403_54@,"@angular@H_403_54@/router"@H_403_54@: "3.0.1"@H_403_54@,"@angular@H_403_54@/upgrade"@H_403_54@: "2.0.1"@H_403_54@,"angular-in-memory-web-api"@H_403_54@: "0.1.1"@H_403_54@,"bootstrap"@H_403_54@: "3.3.5"@H_403_54@,"core-js"@H_403_54@: "2.4.1"@H_403_54@,"reflect-Metadata"@H_403_54@: "0.1.6"@H_403_54@,"rxjs"@H_403_54@: "5.0.0-beta.12"@H_403_54@,"zone.js"@H_403_54@: "0.6.23"@H_403_54@
},"devDependencies"@H_403_54@: {
"html-webpack-plugin"@H_403_54@: "^2.24.1"@H_403_54@,"ts-loader"@H_403_54@: "^0.9.5"@H_403_54@,"typescript"@H_403_54@: "^2.0.6"@H_403_54@,"typings"@H_403_54@: "^1.5.0"@H_403_54@,"webpack"@H_403_54@: "^1.13.3"@H_403_54@,"webpack-dev-server"@H_403_54@: "^1.16.2"@H_403_54@
}
很显然,ng2的库不是最新的,那么想升级到最新的库,而且不让他们出现error, 这就需要如下步骤。注意,如果按照上面的package.json文件,npm install
会出现问题,莫慌,故意为之!
`-- UNMET PEER DEPENDENCY zone.js@H_403_54@@0@H_403_54@.6@H_403_54@.23@H_403_54@
原因是 故意降低了 zone.js的版本,正确版本是 0.6.25
npm list –depth 0
简单查看 依赖库 的信息.
$ @H_403_54@npm list --depth 0@H_403_54@
ng2-starter-webpack@0@H_403_54@.0@H_403_54@.1@H_403_54@ E@H_403_54@:@H_403_54@\Project_Dev@H_403_54@\Angularjs2@H_403_54@\ng2-starter-webpack
+-- @angular@H_403_54@/common@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/compiler@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/core@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/forms@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/http@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/platform-browser@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/platform-browser-dynamic@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/router@3@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/upgrade@2@H_403_54@.0@H_403_54@.1@H_403_54@
+-- angular-in@H_403_54@-memory-web-api@0@H_403_54@.1.1@H_403_54@
+-- bootstrap@3@H_403_54@.3.5@H_403_54@
+-- core-js@2@H_403_54@.4.1@H_403_54@
+-- html-webpack-plugin@2@H_403_54@.24.1@H_403_54@
+-- reflect-Metadata@0@H_403_54@.1.6@H_403_54@
+-- rxjs@5@H_403_54@.0@H_403_54@.0@H_403_54@-beta.12@H_403_54@
+-- ts-loader@0@H_403_54@.9.5@H_403_54@
+-- typescript@2@H_403_54@.0@H_403_54@.10@H_403_54@
+-- typings@1@H_403_54@.5.0@H_403_54@
+-- webpack@1@H_403_54@.13.3@H_403_54@
+-- webpack-dev-server@1@H_403_54@.16.2@H_403_54@
`-- UNMET@H_403_54@ PEER@H_403_54@ DEPENDENCY@H_403_54@ zone.js@0@H_403_54@.6.23@H_403_54@
npm ERR@H_403_54@! peer dep missing:@H_403_54@ zone.js@^0@H_403_54@.6.25@H_403_54@,required by angular-in@H_403_54@-memory-web-api@0@H_403_54@.1.1@H_403_54@
注意,其中的npm Error: angular-in-memory-web-api@0.1.1需要的zone.js版本是 0.6.25
,所以导致出现了错误,这就是常见的 peer dependencies
问题。
npm ERR!@H_403_54@ peer dep missing: zone.@H_403_54@js@^0.6@H_403_54@.25@H_403_54@,required by@H_403_54@ angular-in@H_403_54@-memory@H_403_54@-web@H_403_54@-api@H_403_54@@0.1@H_403_54@.1@H_403_54@
只要修改为正确的版本后,就不会出现问题了。
npm outdated
该命令是查询当前package中有哪些依赖库是过时了的。 结果如下
$ npm outdated
Package Current Wanted Latest Location
@angular/common 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/compiler 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/core 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/forms 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/http 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/platform-browser@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/platform-browser@H_403_54@-dynamic@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/router 3.0@H_403_54@.1@H_403_54@ 3.0@H_403_54@.1@H_403_54@ 3.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
@angular/upgrade 2.0@H_403_54@.1@H_403_54@ 2.0@H_403_54@.1@H_403_54@ 2.2@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
angular-in@H_403_54@-memory@H_403_54@-web@H_403_54@-api@H_403_54@ 0.1@H_403_54@.1@H_403_54@ 0.1@H_403_54@.1@H_403_54@ 0.1@H_403_54@.15@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
bootstrap 3.3@H_403_54@.5@H_403_54@ 3.3@H_403_54@.5@H_403_54@ 3.3@H_403_54@.7@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
reflect-Metadata@H_403_54@ 0.1@H_403_54@.6@H_403_54@ 0.1@H_403_54@.6@H_403_54@ 0.1@H_403_54@.8@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
rxjs 5.0@H_403_54@.0@H_403_54@-beta@H_403_54@.12@H_403_54@ 5.0@H_403_54@.0@H_403_54@-beta@H_403_54@.12@H_403_54@ 5.0@H_403_54@.0@H_403_54@-rc@H_403_54@.3@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
ts-loader@H_403_54@ 0.9@H_403_54@.5@H_403_54@ 0.9@H_403_54@.5@H_403_54@ 1.2@H_403_54@.1@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
typescript 2.0@H_403_54@.10@H_403_54@ 2.1@H_403_54@.1@H_403_54@ 2.0@H_403_54@.10@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
typings 1.5@H_403_54@.0@H_403_54@ 1.5@H_403_54@.0@H_403_54@ 2.0@H_403_54@.0@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
zone.@H_403_54@js 0.6@H_403_54@.25@H_403_54@ 0.6@H_403_54@.25@H_403_54@ 0.6@H_403_54@.26@H_403_54@ ng2-starter@H_403_54@-webpack@H_403_54@
一目了然,当前的version, 最新的version。
不要猴急把package中的版本号都替换为最新的,要考虑依赖的问题。ng2的core库依赖rxjs.js,zone.js, 把ng2升级到2.2.0
,是否有必要把rxjs 或 zone.js升级为最新的版本呢? 也不一定。
npm view xxxpackage/xxx@x.x.x peerDependencies
该命令告诉我们,具体某个依赖包 的依赖关系。
$ @H_403_54@npm view @angular@H_403_54@/core@2@H_403_54@.2.0@H_403_54@ peerDependencies
{ rxjs:@H_403_54@ '5.0.0-beta.12'@H_403_54@,'zone.js'@H_403_54@:@H_403_54@ '^0.6.21'@H_403_54@ }
以查看 @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@H_403_54@-memory@H_403_54@-web@H_403_54@-api@H_403_54@@0.1@H_403_54@.1@H_403_54@ peerDependencies
{ '@angular/core'@H_403_54@: '^2.0.0'@H_403_54@,'@angular/http'@H_403_54@: '^2.0.0'@H_403_54@,'reflect-Metadata'@H_403_54@: '^0.1.3'@H_403_54@,rxjs: '5.0.0-beta.12'@H_403_54@,'zone.js'@H_403_54@: '^0.6.25'@H_403_54@ }
以上说明,当升级ng2相关库为 2.2.0的时候,可以不用升级 * angular-in-memory-web-api@0.1.1 *
但是,修改完成 ng相关库为 2.2.0后,再次执行 npm install, 还是有错误
$ @H_403_54@npm list --depth 0@H_403_54@
ng2-starter-webpack@0@H_403_54@.0@H_403_54@.1@H_403_54@ E@H_403_54@:@H_403_54@\Project_Dev@H_403_54@\Angularjs2@H_403_54@\ng2-starter-webpack
+-- UNMET@H_403_54@ PEER@H_403_54@ DEPENDENCY@H_403_54@ @angular@H_403_54@/common@2@H_403_54@.2.0@H_403_54@
+-- @angular@H_403_54@/compiler@2@H_403_54@.2.0@H_403_54@
+-- UNMET@H_403_54@ PEER@H_403_54@ DEPENDENCY@H_403_54@ @angular@H_403_54@/core@2@H_403_54@.2.0@H_403_54@
+-- @angular@H_403_54@/forms@2@H_403_54@.2.0@H_403_54@
+-- @angular@H_403_54@/http@2@H_403_54@.2.0@H_403_54@
+-- UNMET@H_403_54@ PEER@H_403_54@ DEPENDENCY@H_403_54@ @angular@H_403_54@/platform-browser@2@H_403_54@.2.0@H_403_54@
+-- @angular@H_403_54@/platform-browser-dynamic@2@H_403_54@.2.0@H_403_54@
+-- @angular@H_403_54@/router@3@H_403_54@.0@H_403_54@.1@H_403_54@
+-- @angular@H_403_54@/upgrade@2@H_403_54@.2.0@H_403_54@
+-- angular-in@H_403_54@-memory-web-api@0@H_403_54@.1.1@H_403_54@
+-- bootstrap@3@H_403_54@.3.5@H_403_54@
+-- core-js@2@H_403_54@.4.1@H_403_54@
+-- html-webpack-plugin@2@H_403_54@.24.1@H_403_54@
+-- reflect-Metadata@0@H_403_54@.1.6@H_403_54@
+-- rxjs@5@H_403_54@.0@H_403_54@.0@H_403_54@-beta.12@H_403_54@
+-- ts-loader@0@H_403_54@.9.5@H_403_54@
+-- typescript@2@H_403_54@.0@H_403_54@.10@H_403_54@
+-- typings@1@H_403_54@.5.0@H_403_54@
+-- webpack@1@H_403_54@.13.3@H_403_54@
+-- webpack-dev-server@1@H_403_54@.16.2@H_403_54@
`-- zone.js@0@H_403_54@.6.25@H_403_54@
npm ERR@H_403_54@! peer dep missing:@H_403_54@ @angular@H_403_54@/common@2@H_403_54@.0@H_403_54@.1@H_403_54@,required by @angular@H_403_54@/router@3@H_403_54@.0@H_403_54@.1@H_403_54@
npm ERR@H_403_54@! peer dep missing:@H_403_54@ @angular@H_403_54@/core@2@H_403_54@.0@H_403_54@.1@H_403_54@,required by @angular@H_403_54@/router@3@H_403_54@.0@H_403_54@.1@H_403_54@
npm ERR@H_403_54@! peer dep missing:@H_403_54@ @angular@H_403_54@/platform-browser@2@H_403_54@.0@H_403_54@.1@H_403_54@,required by @angular@H_403_54@/router@3@H_403_54@.0@H_403_54@.1@H_403_54@
本次是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