新款mbp鎮樓 !

起因

某天發生一件比較奇怪的事情，從git上clone下來的代碼，執行完npm install && bower install之後，app不能正常工作。

分析

根據報錯信息發現是angular出了些莫明奇妙的錯誤，而同樣版本的代碼，在上個月setup在同一台機器上另外一個目錄是可以work的。我大致推斷出，可能是依賴的第三方包衝突了，查了下昨天angular確實發佈了新版本1.6.0，我打開bower_components/angular/package.json 中的version字段，確實被升級成1.6.0了，而可以work的那個目錄下的angular由於是上個月安裝的所以版本號是1.5.8。我把angular的版本退回了1.5.8就可以正常work了。

深入分析

所以説第三方包的日常更新，很可能會影響到我們項目的運行。打開根目錄下的package.json或者bower.json我們會在dependencies中找到各個依賴包的名字和版本號定義，一般情況下這個版本號大致有以下3種套路

"dependencies": {
    "angular":"^1.4.10"
    }

"dependencies": {
    "angular":"~1.4.10"
    }

"dependencies": {
    "angular":"1.4.10"
    }

説到這裏就要提一下版本號的一種定義規則叫做Semantic Versioning

版本格式：主版本號.次版本號.修訂號，版本號遞增規則如下：

主版本號：當你做了不兼容的 API 修改，
次版本號：當你做了向下兼容的功能性新增，
修訂號：當你做了向下兼容的問題修正。
先行版本號及版本編譯信息可以加到“主版本號.次版本號.修訂號”的後面，作為延伸。

而 ^ 和 ～ 的作用就是用來控制install時候選擇版本的策略

• "angular":"^1.4.10" 意味着，本次安裝會選擇GitHub 上angular 1.x.x版本中最高的版本，即使angular的最新版本是2.x.x,不會去升級主版本號，但是誰挑選此版本號中最高的裝

• "angular":"~1.4.10" 意味着， 本次安裝會選擇GitHub 上angular 1.4.x 版本中最高的版本，比如1.4.20 不會去升級主版本號和次版本號

• "angular":"1.4.10" 就是寫死了，每次都是固定版本。

由於package.json ／ bower.json很多地方都是用了^策略，所以當次版本號改變時，往往是比較大的更新，很有可能會引發衝突。

正題

鋪墊了這麼多，終於要步入正題了。辣麼，如果這類問題發生了我們該如何去排錯呢，這裏就要給大家安利一款本人寫的vscode插件，叫做 library-version，它可以方便的把項目下node_moudules / bower_components下所有依賴包的版本號統一列出來，不需要你一個個點開各自的pacakge.json文件去查找了。是不是很有用？把前後2份生成的version list對比一下就知道哪些包被升級了，從而開始着手排查問題，或者從新制定安裝策略。

關於插件library-version

最後希望大家幫忙安裝下，幫我increase一下download count
如果大家對這款插件的開發有興趣，我有時間也會另開一篇文章來講講這個插件的實現思路。
插件可以直接使用你的vscode安裝，搜library-version
marketplace地址：https://marketplace.visualstu...
github地址： https://github.com/momoko8443...

後續 2017.01.08 更新

根據評論中同學的推薦，使用了yarn這個包管理工具，這個工具會在第一次執行的install的時候生成一份yarn.lock文件，裏面就鎖定了依賴包的具體版本，如果以後在其它路徑下再按裝的話，如果include了之前的yarn.lock文件，那麼就會嚴格按照之前的版本去安裝依賴包，而不會根據Semantic規則去自動升級包了。

另外，今天也在另外個team的node工程裏看到一個npm-shrinkwrap.json的文件，我好奇打開一看發現裏面的配置和yarn.lock的配置大同小異，心想會不會npm install的時候也有類似lock版本號的功能，於是查了下npm的doc發現，確實是有的，參見 npm-shrinkwrap 不過這個生成lock文件的功能需要自己手動執行 npm shrinkwrap。