在學習更新Angular之前先來看看package.json這個檔案，它是Node.js的套件管理工具（npm）用來描述專案裡面所有相關的資訊如：名稱、描述、版本、依賴項目、建置等等，其中依賴項目就是用來管控項目的版本以及升級規則，我們就先來瞭解依賴項目的版本號所代表的一些資訊吧！
Package.json的依賴套件項目
Package.json的依賴套件項目分成三段版號x.x.x這三段版號是由Semantic Version（SemVer）做規範的（關於規範可以【點我前往參考】）
- 第一個x →主版號：我會想成重大更新之類的才會改這個版號
- 第二個x →次版號：譬如有新功能時會改這個版號
- 第三個x →修訂號：有修復一些Bug就會更改這個版號
- 波浪符號~：如果有「次版號」就會升級「修訂號」到最高版本,沒有的話就是直接升到最高版本💡 有次版號：~1.1.1範圍是1.1.1 >= 版本 < 1.2.0
沒次版號：~1.0.0範圍就是1.0.0 >= 版本 < 2.0.0 - 往上箭頭符號^：允許不修改三段版號中「最左邊的非零元素」的更改（這段我真的不知道要怎麼翻譯成白話XD），另外它還可以使用萬用字元可以用如：X、x、*💡 ^1.1.1範圍是1.1.1 >= 版本 < 2.0.0
^0.2.2範圍就是0.2.2 >= 版本 < 0.3.0
^0.0.3範圍就是0.0.3 >= 版本 < 0.0.4
^1.2.x範圍就是1.2.0 >= 版本 < 2.0.0
稍微理解Package.json的依賴套件項目資訊之後就可以開始更新所需要的版本號了，建議更新前最好先去查詢和理解最新版本的差異和其依賴項目的版本之類的訊息才不會更新後壞東壞西的，這裡npm有一個指令可以查詢過時的依賴套件項目版本
npm outdated
- Current：本地安裝的版本號碼
- Wanted：滿足Package.json的SemVer規範範圍內最高的版本
- Lastest：npm上最新的版本號碼
Package的顏色也有他代表的意義
- 黃色：表示npm上的版本比Current和Wanted還要新的版本（意思就是如果你要升級上去要謹慎思考XD）
- 紅色：表示你本地安裝的版本低於Wanted的版本，應該要立即更新
npm update
當然是直接使用npm提供的update指令，它會遵守Package.json的所有依賴套件項目和其依賴項的SemVer規則去更新npm update如果有依賴衝突時則會終止更新，這時候可以使用指令「忽略相依套件」或是「強迫更新」
npm update --legacy-peer-depsnpm update --force
💡謹慎使用XD
npm-check-updates
npm-check-updates是我覺得挺方便友善的一個套件工具功能也很多有興趣的可以【點我前往】
首先當然是要先安裝這個套件
npm install -g npm-check-updates我們可以使用指令檢查Package.json的更新項目
ncu
💡應該可以算是npm outdated的進階版（嗎？
也可以不檢查直接更新Package.json檔案
ncu --updatencu -u
ncu --filter "/^(?!@angular).*$/"
💡如果要更新Package.json一樣可以加入-u參數
以上的指令只要有-u都會更新Package.json，但跟npm update不太一樣的地方是它會不理會破壞性更新強制更改Package.json到最新版本但是不會修改Package-lock.json，所有最後還是要執行一次npm install
Angular的更新方式
我們直接使用更新指令來檢查更新
ng update
也可以直接更CLI或是CORE套件
ng update @angular/cli @angular/core
檢查一下Package.json可以看到除了CLI和CORE套件ng update也自動幫我們把相依性的套件也一併更新上去了是不是很厲害！
有趣的是你也可以用ng update更新其它非Angular的套件實在是太酷了XD
總結
總之不管你選的是npm update、npm-check-updates又或是ng update只要能夠安全的更新上去並且確保原有專案不會因為更新而壞掉我覺得都OK啦XD，以上大家就參考看看囉！
0 Comments
張貼留言