npm進階（一） 更換成淘寶鏡像源以及 cnpm

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、前言","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"node","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝插件是從國外服務器下載，受網絡限制影響大，速度慢且可能出現異常。所以，（阿里巴巴旗下業務阿里雲）幹了這事。來自官網介紹：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這是一個完整 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npmjs.org","attrs":{}}],"attrs":{}},{"type":"text","text":" 鏡像，你可以用此代替官方版本(只讀)，同步頻 率目前爲 10分鐘 一次以保證儘量與官方服務同步。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"也就是說，我們可以使用阿里佈置在國內的服務器來進行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"node","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、使用方法","attrs":{}}]},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用阿里定製的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":" 命令行工具代替默認的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"，輸入下面代碼進行安裝：","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":"npm install -g cnpm --registry=https://registry.npm.taobao.org\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":2,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"檢測","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"版本，如果安裝成功可以看到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"的基本信息。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":"cnpm -v\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":3,"normalizeStart":3},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"以後安裝插件只需要使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm intall","attrs":{}}],"attrs":{}},{"type":"text","text":"即可。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"假如已經習慣了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm install","attrs":{}}],"attrs":{}},{"type":"text","text":"的安裝方式，不想去下載阿里的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"命令工具的話，將命令變成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"怎麼辦？很容易我們想到，直接將","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"node","attrs":{}}],"attrs":{}},{"type":"text","text":"倉庫地址改成淘寶鏡像的倉庫地址不就好了嗎？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"單次生效","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":"npm install --registry=https://registry.npm.taobao.org\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"永久生效","attrs":{}},{"type":"text","text":"設置成全局的下載鏡像站點，這樣每次","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"install","attrs":{}}],"attrs":{}},{"type":"text","text":"的時候就不用加","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"--registry","attrs":{}}],"attrs":{}},{"type":"text","text":"，默認會從淘寶鏡像下載，設置方法如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"打開","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".npmrc","attrs":{}}],"attrs":{}},{"type":"text","text":"文件（","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"nodejs\\node_modules\\npm\\npmrc","attrs":{}}],"attrs":{}},{"type":"text","text":"，沒有的話可以使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"git","attrs":{}}],"attrs":{}},{"type":"text","text":"命令行建一個( ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"touch .npmrc","attrs":{}}],"attrs":{}},{"type":"text","text":")，用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cmd","attrs":{}}],"attrs":{}},{"type":"text","text":"命令創建會報錯）；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"增加 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"registry =https://registry.npm.taobao.org","attrs":{}}],"attrs":{}},{"type":"text","text":" 即可。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"也可以按如下方式直接在命令行設置：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":"npm config set registry https://registry.npm.taobao.org\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"檢測是否成功","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":"// 配置後可通過下面方式來驗證是否成功\nnpm config get registry\n// 或\nnpm info express\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這樣，就可以使用淘寶鏡像還不用更換成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"，雖然實際都是使用的是淘寶鏡像。最後附上淘寶鏡像官網地址：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"http://npm.taobao.org/","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注：如果想還原","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"倉庫地址，只需再把地址配置成","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"鏡像就可以了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":" npm config set registry https://registry.npmjs.org/\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三、npm淘寶鏡像與cnpm區別","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之前一直以爲","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"改成淘寶鏡像後和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"本質是一樣的，今天在研究","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"package-lock.json","attrs":{}}],"attrs":{}},{"type":"text","text":"時候發現，這兩者還是有很大區別。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先貼下截圖對比：1.使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/66/6691f698b04dc009daec68ec58afa460.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.使用改成淘寶倉庫的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0a/0aede7dc2a35941073e6fcc6f64cbc05.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過截圖會發現：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝模塊的時候會在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"node_modules","attrs":{}}],"attrs":{}},{"type":"text","text":"文件夾生成二個文件夾，一個以下劃線 _開頭以及版本號組成的名字，一個正常名字的模塊，文件夾名字雖然不一樣，但裏面文件是一樣的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm install lodash","attrs":{}}],"attrs":{}},{"type":"text","text":",會在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"node_modules","attrs":{}}],"attrs":{}},{"type":"text","text":"文件夾下生成兩個文件夾：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"[email protected]@lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm install lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"，然後再執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm install lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"會替換掉","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"包（包括以下劃線開頭那個包），文件夾會只剩一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"先安裝的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"包。再次","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm uninstall lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"或者","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm uninstall lodash","attrs":{}}],"attrs":{}},{"type":"text","text":",都會刪除","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"包，此時插件包就變成空文件夾了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm install lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"，然後再執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm uninstall lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"後，此時會報錯","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"c"},"content":[{"type":"text","text":" npm ERR! code EINVALIDPACKAGENAME\n npm ERR! Invalid package name \"[email protected]@lodash\": name cannot start with an underscore; \n name can only contain URL-friendly characters\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm uninstall lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"後，不會報錯，此時會刪掉","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝的兩個包中其中一個即非下劃線（正常名字）的包。剩餘的那個包是可以正常通過鼠標點擊打開的。然後在文件中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"require","attrs":{}}],"attrs":{}},{"type":"text","text":"會報錯，提示沒有這個包。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm install lodash","attrs":{}}],"attrs":{}},{"type":"text","text":"，然後手動刪除","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝的兩個包中其中一個即下劃線（非正常名字）的包，剩餘的那個包，發現無法通過鼠標點擊打開了。然後在文件中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"require","attrs":{}}],"attrs":{}},{"type":"text","text":"會報錯，提示沒有這個包。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3a/3acbf308e1920dd32cbfd61de3cba761.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝的2個模塊，兩者存在引用關係，正常名字模塊是非正常名字模塊的索引，兩者都必須存在纔可以使用。但是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝下來就不存在這種情況了，因爲只有一個正常名字模塊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"實測發現，儘管使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"改成淘寶倉庫，發現安裝速度還是遠遠比","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"慢（當模塊比較多的時候）。應該和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cnpm","attrs":{}}],"attrs":{}},{"type":"text","text":"安裝的文件結構有關係。","attrs":{}}]}]}