npm進階——如何擁有本身的包和流程自動化

做爲包管理器，npm在前端開發過程當中使用頻率很高，不過大部分前端可能只使用過npm install等簡單的功能。今天這篇文章主要介紹一些進階的知識點，分爲兩個部分，第一個部分是從npm包開發者的角度講解怎麼發佈和管理本身的包。而第二部分是從使用者的角度，介紹怎麼使用npm工具進行流程自動化，從而讓前端開發過程更流暢和高效。但願對你們有幫助。

如何發佈本身的npm包

咱們能夠將開發者大體分爲兩類，一類是使用輪子的，而另外一類就是造輪子的。有時候開發業務的前端也須要本身造輪子，那麼就須要可以發佈和管理本身的前端工具包。

要發佈本身的npm包的話，首先要到npm官網註冊一個帳號。若是你使用的是企業私有的倉庫，那可能就須要到管理員那裏申請一個帳號。

有了這個帳號後，使用npm login命令進行登陸：

如今準備咱們要上傳的代碼，先新建一個用於開發npm包的項目:

mkdir npm-test
cd npm-test
npm init
複製代碼

接着就是寫代碼，並準備好一個良好的說明文件(README.md)。

作完準備工做後，就能夠執行命令進行發佈了:

npm publish
複製代碼

後續要更新只要在package.json裏修改對應的版本號，而後再執行npm publish命令就能夠了。

關於版本號和標籤

npm包的版本號遵循着必定的規範，好比1.5.2這個版本號，其中1是主版本號(major version)，5是次版本號(minor version)，而 2是補丁版本號(patch version)，主要用來bug修復的更新等。在包管理的時候遵循對應語義的版本號更新，便於後續維護。

同時，在發佈一個新版本的時候，還可使用打標籤的方式進行標記，如：

npm publish --tag beta
npm publish --tag bugfix
複製代碼

若是你的包是已經發布過了，還能夠對指定的版本號進行打標籤:

npm dist-tag add npm-test@1.0.0 [stable]
複製代碼

scope包

有時候你須要同時發佈多個包，並且這些包之間有着從屬關係。這時候，你能夠考慮將它們放在同一個域(scope)下面進行管理。就像咱們日常使用@material包同樣，全部的scope包都會有一個域名，在初始化包的使用如下命令：

npm init --scope=@scq000test
複製代碼

這樣咱們就建立了從屬於這個域的包了。默認狀況下，這樣發佈的包是私有的，若是要發佈到公網上，必須指定對應的權限，能夠執行以下命令進行發佈：

npm publish --access public
複製代碼

這樣一來，在後續使用過程當中只要執行npm install @scq000test就會批量安裝全部以@scq000test做爲域的包了。

安全審查

通常在寫完代碼以後，都有必要進行安全檢測，以確保代碼中引用的其它npm包都是符合安全規範的。要作到這一點能夠利用官方提供的npm audit命令進行處理。

當咱們執行npm install來安裝依賴包的時候，默認狀況npm也會執行安全審查的操做。可是若是咱們想要更詳細的審查信息就須要執行命令npm audit進行查看。

若是發現安全報告中有可疑項，可使用命令：

npm audit fix
複製代碼

進行自動修復。修復完成後，若是還有問題，就須要仔細分析引用包的風險，再考慮手動修復或者換包。

npm緩存

利用緩存是提升安裝速度的一種頗有效的方式。不過有時候npm緩存也很容易形成一些麻煩，若是你在項目使用過程中一旦懷疑是緩存影響了代碼的正常工做，可使用npm cache verify這個命令驗證緩存信息。

另外，還可使用命令npm cache clean用來清理緩存，當代碼有問題的時候，這個命令也十分經常使用。

如何利用npm實現自動化流程

提升開發效率在日常的工做中是十分重要的，由於對於可以自動化執行的操做耗費精力是不值得的。那麼在前端開發過程中有哪些小技巧可以有效地幫助咱們提升平常工做效率呢？

這裏推薦使用npm腳本。

前端工做流當中很重要的一個部分就是使用自動化腳本進行構建，想必你們日常使用最多的實際上是npm start這個命令。其實除了這個比較經常使用的命令以外，咱們還可以作一些更深刻的挖掘。若是你可以把一個經常使用的任務拆分紅許多子任務的話，那麼在後期維護和管理的過程中就能更有效率。

好比，在作前端項目的測試的時候，一般能夠將任務分爲單元測試，端對端測試和集成測試。藉助npm run all這個工具就可以批量執行測試腳本:

{
  "scripts": {
    "test:unit": "jest unit/*.spec.js",
    "test:e2e": "jest e2e/*.spec.js",
    "test:integrate": "jest integrate/*.spec.js",
    "test": "npm-run-all test:* --parallel"
  }
}
複製代碼

這樣一來，只須要執行npm run test這一條命令，就能同時執行全部的測試任務。

另一個例子就是咱們經常還須要注意不一樣操做系統上兼容性問題。可能你寫的一些npm腳本並不可以很好地在多個操做系統上都工做。這時候你就須要花一些時間去調試這些腳本，或者是找到所對應的跨平臺的解決方案，再或者說能夠利用工具run-script-os來針對不一樣的操做系統寫腳本：

{
  "scripts": {
    "test": "run-script-os",
    "test:win32": "echo 'del whatever you want in Windows 32/64'",
    "test:darwin:linux": "echo 'You can combine OS tags and rm all the things!'",
    "test:default": "echo 'This will run on any platform that does not have its own script'"
  }
}
複製代碼

不少Linux環境下的經常使用命令在node.js端也已經有現成的工具，咱們能夠很方便地拿來就用。下面是一些在實際開發當中用的比較多的一些npm包以及它們所對應的Linux命令:

linux命令	對應的npm包
bash	node
cat	catw
rm	rimraf
mkdir	mkdirp

還有一個注意事項是，在寫腳本過程中，咱們不該該過分地依賴node_module這個目錄，而應該使用一個比較通用的路徑名稱，以便在其餘開發者的電腦上也可以正常的使用咱們寫的npm腳本。下面這個例子就不是一個很好的實踐，由於在他人的電腦上可能失效:

{
  "scripts": {
    "test": "./node_modules/.bin/jest ./index.spec.js"
  }
}
複製代碼

咱們最好將其改爲下面這樣:

{
  "scripts": {
    "test": "jest ./index.spec.js"
  }
}
複製代碼

生命週期

npm提供了強大的生命週期鉤子，pre和post。經過前置和後置鉤子可讓將環境準備和清理的工做從主任務中拆分出來。

{
    "scripts": {
        "prebuild": "npm install",
        "build": "cross-env NODE_ENV=production webpack",
        "postbuild": "rimraf ./dist"
    }
}
複製代碼

總結

npm已是前端開發的一個核心工具了，利用好官方提供的一些高級功能可以極大地提升咱們開發的效率。若是你是npm包的開發者，那麼就須要理解整個發佈流程和版本號更新的策略。而做爲使用者，須要掌握npm scripts的編寫，讓開發體驗更加順暢。

——轉載請註明出處———

微信掃描二維碼，關注個人公衆號

最後，歡迎你們關注個人公衆號，一塊兒學習交流。

參考資料

docs.npmjs.com/misc/script…

www.ruanyifeng.com/blog/2016/1…