どのように優雅にng 2プロジェクトをアップグレードします
22657 ワード
本文の初発簡書http://www.jianshu.com/p/b583e6bc6139あ、転載を歓迎しますが、転載リンクを明記してください.ありがとうございます.
説明
ここでのアップグレードとは、ng 1がどのようにng 2にアップグレードされるかではなく、ng 2だけを栗として使用して、既存のプロジェクトをどのようにアップグレードするかを説明します.どのようにng 1からng 2にアップグレードするかを見たいなら、Angular中国語コミュニティ(マイクロ信号:angularcn)の
に質問
プロジェクトが反復されると、packageファイルの依存ライブラリが最新ではない可能性があります.依存ライブラリをタイムリーに更新するには、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
記号~
挙栗:"@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アップグレードコマンド
ng 2のng 2-starter-webpackプロジェクトを例に、ng 2関連バージョンを優雅にアップグレードする方法を説明します.package.jsonファイルの内容:
明らかに、ng 2のライブラリは最新ではありません.では、最新のライブラリにアップグレードし、errorを表示させないには、次の手順が必要です.注意、上のpackage.jsonファイルに従うと、
zone.jsのバージョンを故意に下げたため、正しいバージョンは0.6.25です.
npm list –depth 0
依存ライブラリの情報を簡単に表示します.
npm Error:[email protected]必要なzone.jsバージョンは
正しいバージョンに変更すれば問題は発生しません.
npm outdated
このコマンドは、現在のpackageでどの依存ライブラリが時代遅れであるかをクエリーします.結果は次のとおりです.
一目瞭然、現在のversion、最新のversion.
急いでパッケージのバージョン番号を最新に置き換えるのではなく、依存の問題を考慮してください.ng 2のcoreライブラリはrxjs.js,zone.jsに依存し、ng 2を
npm view xxxpackage/[email protected] peerDependencies
このコマンドは、特定の依存パッケージの依存関係を示します.
@angular/を表示[email protected]例としては、*{rxjs:'5.0.0-beta.12'、'zone.js':'^0.6.21'}に依存します.つまり、@angular/core*を*2.2.0*にアップグレードする必要はありません.rxjs、zone.jsバージョンをアップグレードする必要はありません.すぐに更新されたバージョンがあります.
依存ライブラリをもう一つ見てみましょう:*[email protected] *
以上説明したように、ng 2関連ライブラリのアップグレードが2.2.0の場合、*angular-in-memory-web-をアップグレードする必要はありません[email protected] *
ただし、修正完了ng関連ライブラリが2.2.0になった後、npm installを再度実行すると、エラーが発生します
今回は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/[email protected] peerDependencies
Step 3関連バージョンの変更
Step 4繰り返し
説明
ここでのアップグレードとは、ng 1がどのようにng 2にアップグレードされるかではなく、ng 2だけを栗として使用して、既存のプロジェクトをどのようにアップグレードするかを説明します.どのようにng 1からng 2にアップグレードするかを見たいなら、Angular中国語コミュニティ(マイクロ信号:angularcn)の
ng1 ng2 が答えです!に質問
プロジェクトが反復されると、packageファイルの依存ライブラリが最新ではない可能性があります.依存ライブラリをタイムリーに更新するには、packageのバージョン番号を変更する必要があります.しかし、一部の依存は他の依存ライブラリに依存し、最新バージョンに依存ライブラリを簡単に更新するだけでは
peer Dependenciesエラーが発生する可能性があります.では、この問題をどう処理すればいいのでしょうか.着実に進めます!パッケージ依存バージョン
アップグレード方法を説明する前に、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
記号~
挙栗:"@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アップグレードコマンド
ng 2のng 2-starter-webpackプロジェクトを例に、ng 2関連バージョンを優雅にアップグレードする方法を説明します.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"
}明らかに、ng 2のライブラリは最新ではありません.では、最新のライブラリにアップグレードし、errorを表示させないには、次の手順が必要です.注意、上のpackage.jsonファイルに従うと、
npm installに問題が発生します.慌てないで、わざと!`-- UNMET PEER DEPENDENCY zone.js@0.6.23zone.jsのバージョンを故意に下げたため、正しいバージョンは0.6.25です.
npm list –depth 0
依存ライブラリの情報を簡単に表示します.
$ npm list --depth 0
ng2-starter-webpack@0.0.1 E:\Project_Dev\Angularjs2
g2-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:[email protected]必要な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.
急いでパッケージのバージョン番号を最新に置き換えるのではなく、依存の問題を考慮してください.ng 2のcoreライブラリはrxjs.js,zone.jsに依存し、ng 2を
2.2.0にアップグレードしますが、rxjsやzone.jsを最新バージョンにアップグレードする必要はありますか?必ずしもそうとは限らない.npm view xxxpackage/[email protected] peerDependencies
このコマンドは、特定の依存パッケージの依存関係を示します.
$ npm view @angular/core@2.2.0 peerDependencies
{ rxjs: '5.0.0-beta.12', 'zone.js': '^0.6.21' }@angular/を表示[email protected]例としては、*{rxjs:'5.0.0-beta.12'、'zone.js':'^0.6.21'}に依存します.つまり、@angular/core*を*2.2.0*にアップグレードする必要はありません.rxjs、zone.jsバージョンをアップグレードする必要はありません.すぐに更新されたバージョンがあります.
依存ライブラリをもう一つ見てみましょう:*[email protected] *
$ 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' }
以上説明したように、ng 2関連ライブラリのアップグレードが2.2.0の場合、*angular-in-memory-web-をアップグレードする必要はありません[email protected] *
ただし、修正完了ng関連ライブラリが2.2.0になった後、npm installを再度実行すると、エラーが発生します
$ npm list --depth 0
ng2-starter-webpack@0.0.1 E:\Project_Dev\Angularjs2
g2-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/[email protected] peerDependencies
Step 3関連バージョンの変更
Step 4繰り返し