【譯文】NPM 小技巧&最佳實踐

0x584a 發布于2019-08-22 10:49 / 3125人閱讀

摘要：但在生產環境下，如果不指定保存依賴的版本號會存在問題。它會生成一個文件，不僅記錄了當前環境中使用的模塊精確的版本號，還記錄了這些模塊的其他依賴的版本，以此類推。

本文來自國外新手向技術博客RisingStack。有興趣的同學可點擊原文查看。

相信npm install是npm-cli最常用的功能，但其實它還有很多其他可挖掘的地方。在本文中，你將會學習如何在應用開發的整個生命周期中——包括從新建，到開發，再到發布上線，npm如何幫你更好地完成開發。

0. npm基礎使用

在進入今天的主題之前，我們先來回顧下一些npm命令，例如如何確定你的npm版本、哪些命令可供你使用等。

0.1 npm版本

要查看現有的npm版本，在命令行工具中運行如下命令：

$ npm --version

但npm其實能告訴你更多關于版本的信息，如目前各package的版本、Node.js的版本、OpenSSL版本、V8的版本等，如下：

$ npm version
{ bleak: "1.0.4",
  npm: "2.15.0",
  ares: "1.10.1-DEV",
  http_parser: "2.5.2",
  icu: "56.1",
  modules: "46",
  node: "4.4.2",
  openssl: "1.0.2g",
  uv: "1.8.0",
  v8: "4.5.103.35",
  zlib: "1.2.8" }

0.2 npm help

和很多cli工具一樣，npm也內置了一個很實用的help功能。讓你可以隨時查閱各種命令的描述和摘要，它們其實就是linux的man-page而已。例如：

$ npm help test
NAME  
       npm-test - Test a package

SYNOPSIS  
           npm test [-- ]

           aliases: t, tst

DESCRIPTION  
       This runs a package"s "test" script, if one was provided.

       To run tests as a condition of installation, set the npat config to true.

1. 用npm init來創建你的項目

When starting a new project npm init can help you a lot by interactively creating a package.json file. This will prompt questions for example on the project"s name or description. However, there is a quicker solution!

創建項目的時候，npm init的優點在于能給交互式地替你創建package.json文件，它會彈出問題讓你填寫項目的名稱和描述等等。但其實還有更簡化的方式：

$ npm init --yes

如果你使用npm init --yes的話，它不會問你要如何創建，就直接按默認配置創建一個package.json。這個默認配置當然也是可實現設置的：

npm config set init.author.name YOUR_NAME  
npm config set init.author.email YOUR_EMAIL

2. 查找npm的package

考慮到npm中有上萬個模塊供你選擇，要找到合適的package是很困難的。我們團隊的經驗是這樣，最近在Node.js的問卷調查中，很多開發者也告訴我們要找到合適的package是很郁悶的一件事情。所以現在我們試著找一個能發送HTTP請求的模塊吧~

npms.io這個網站能很好地幫助到我們。它將各個package的質量、受歡迎度、可維護性等指標做了量化并展現。具體的說，這些指標包括：是否使用了過時的依賴包、是否有代碼檢查配置、是否經過測試以及最近的版本是何時發布的，等等。

3. 了解你選擇的package

當你選定了你要用的模塊之后（本例中我們選用了request模塊），我們應該首先查看它的文檔，看看有什么現存的issue，以便充分了解我們要用在應用中的模塊。希望你牢記一點，當使用的npm package越多，你可能遇到的不可靠或危險的package也就越多。想了解更多npm相關的安全風險的話，請閱讀我們寫的一篇指導文檔。

如果想去到package的主頁，可執行下面的命令：

$ npm home request

要查看現存的issue，或者公開的roadmap，執行以下命令：

$ npm bugs request

另外，如要查看package的倉庫，執行以下命令：

$ npm repo request

4. 保存依賴

當你找到想用在工程里的package之后，下一步就是安裝和保存它。最常用的方式是采用npm install request（譯注：其中的request是package名字）。

如果你還想把這個package自動加到package.json里，你可以這樣：

$ npm install request --save

npm會把你的依賴保存起來，并加上^前綴。這個前綴的意思是，下次再使用npm install是時候還會自動安裝這個package的在此大版本下的最新版本。如果你想修改這個功能的話，可以：

$ npm config set save-prefix="~"

如果你就想保存目前的這個版本，可以：

$ npm config set save-exact true

5. 鎖定依賴

你可以像前面一節講的那樣，在package.json里面指定了保存依賴的版本號。但大部分npm模塊的作者不會這樣做，因為他們想自動地獲取補丁和新功能。

但在生產環境下，如果不指定保存依賴的版本號會存在問題。因為如果恰好你開發的過程中作者發布了新版本，那么有可能本地和生產環境使用的依賴的版本就是不一樣的。這個時候，如果新版本有bug的話，就會影響到生產環境。

要解決這個問題，你可以使用npm shrinkwrap。它會生成一個npm-shrinkwrap.json文件，不僅記錄了當前環境中使用的模塊精確的版本號，還記錄了這些模塊的其他依賴的版本，以此類推。一旦工程中有了此文件，npm install就會使用它來復制一個完全一樣的依賴樹。

6. 查找過時的依賴

npm提供了一個內置的工具方法來查看過時的依賴：npm outdated。

$ npm outdated
conventional-changelog    0.5.3   0.5.3   1.1.0  @risingstack/docker-node  
eslint-config-standard    4.4.0   4.4.0   6.0.1  @risingstack/docker-node  
eslint-plugin-standard    1.3.1   1.3.1   2.0.0  @risingstack/docker-node  
rimraf                    2.5.1   2.5.1   2.5.4  @risingstack/docker-node

當你維護的項目很多的時候，要保持每個項目中的依賴都是最新的是一件很痛苦的事情。要實現這個任務的自動化，可以選用Greenkeeper，當有依賴更新的時候，它會自動為你的倉庫發pull請求。

7. 保存生產環境中沒有devDepenendencies

稱devDepenendencies為開發環境依賴是有原因的，你在生產環境是用不著他們的。生產環境不用這些devDepenendencies可以讓你線上的代碼包更小更安全，因為多一個依賴就多一個安全風險。

如果需要只安裝生產環境依賴，運行：

$ npm install --production

或者，你可以設置NODE_ENV變量為生產環境：

$ NODE_ENV=production npm install

8. 確保你的項目和token的安全

如果你開發的時候登陸了Linux系統的用戶，那你的npm token就會存在.npmrc文件中。有的時候這個文件會不小心被上傳到github。目前，在github上搜索.npmrc文件的話，能找到好幾千個，里面很多都包含了token。如果你自己的倉庫里也有.xxx的文件的話，趕快檢查下自己的證書有沒有被上傳！

另一個潛在的安全隱患在于，有的文件會被不小心上發布到npm上。一般來說npm是參考.gitignore文件來決定哪些文件會被上傳。但你也可以加一個.npmignore文件，它會override.gitignore。

9. 開發package

在本地開發package的時候，大家一般都會在發布之前在自己的項目上先實踐一下。這個時候npm link就能派上用場。

npm link的作用在于，它會在全局目錄創建一個symlink（符號鏈接），指向npm link所運行的那個package。

你也可以在其他地方運行npm link package-name，這樣會在全局安裝的package-name和目前項目的/node_modules之間創建一個symlink。

可以像下面這樣實踐一下！

# create a symlink to the global folder
/projects/request $ npm link

# link request to the current node_modules
/projects/my-server $ npm link request

# after running this project, the require("request") 
# will include the module from projects/request

GPU云服務器云服務器最佳實踐 webrtc最佳實踐 cdn最佳實踐 vpc最佳實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91342.html

css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0