前端工具鏈課（一）——包管理工具

這系列分享其實是今年七月份在清華大學軟工系暑假小學期時爲同窗們講的課程，對於前端初學者來講必定會幫助，一直想給你們分享一下，今天抽空把第一篇先整理出來。

在開始以前，請容許我打一個廣告，個人 知乎 Live 將會在 12 月 13日開始，在 Live 中我會聊聊關於前端工程師的自我修養，和你們分享一下如何成爲一個優雅的前端工程師：點擊參加《Jasin Yip 的 Live —— 前端工程師的自我修養》。

前端工具鏈，故名思義，就是前端工程師在前端開發的過程當中會用到的一系列 工具。咱們說，一個工具的出現，必定是爲了解決某些問題的，好比說，咱們用手去作計算太慢了，因而咱們人類發明了計算器，解決的就是咱們手算太慢的問題。在學習工具的時候，我不建議說，學工具的時候僅僅是爲了學工具而學工具，連爲何要學都沒搞清楚。

因此，在學習一個工具以前，每每咱們應該先去了解這個工具能夠用來解決什麼樣的問題；一樣的，當咱們遇到一個問題的時候，咱們也應該帶着這個問題去找工具解決。在這個系列的文章當中，我也會帶着一個一個在實際工程中會遇到的問題，來跟你們一塊兒學習一下前端工具鏈。

如何管理第三方的庫或框架？

你們知道，咱們在作工程的時候必定會使用大量的第三方庫或框架，好比說你們可能都會用到的 jQuery，它能夠幫咱們簡化不少 JavaScript 代碼，並處理不少兼容性問題，用起來很是方便。可是有一個問題，全部好的庫和框架都會不斷地更新，有的時候新版本的 API 甚至跟舊版本的 API 徹底不同，那咱們在使用它們的時候怎麼去規避這個問題呢？

咱們就會想，能不能只固定使用某一個版本進行開發，當有新版本更新的時候，咱們看一下這個新的版本到底更新了一些什麼東西，而後咱們再決定要不要進行更新。好比說 jQuery 在 2.0 版以前是兼容 IE 8 的，可是在 2.0 版以後就不兼容了，而且帶來不少不錯的更新，因而咱們要衡量一下咱們究竟是那些新 feature 重要，仍是兼容 IE 8 重要。固然，這個要結合這個項目的用戶羣體來進行考慮。

有了這個想法以後，咱們就要來思考一下如何實現了。首先，咱們確定須要一個記錄咱們使用的 jQuery 版本的地方，這樣就能提醒本身或別人咱們應該用哪一個版本的 jQuery 了；而後咱們但願 jQuery 自己能夠標識本身當前的版本是哪一個版本，這樣咱們就能夠檢查這份 jQuery 代碼是否是和咱們前面記錄過的的版本一致了。最後，咱們確定還須要一個地方能存放各個版本的倉庫，這樣咱們就能隨時獲取到任意版本的 jQuery 了。

咱們能夠看到，這一個過程看起來雖然只有三個環節，可是咱們一般在工程中可能會使用幾十上百個開源的包，若是咱們所有都手動這麼去處理的話，現實嗎？明顯是不現實的，因而聰（lan）明（duo）的工程師們就發明了一個工具來解決這個問題。

它就是咱們這篇文章的主角—— NPM。
NPM 最初是 Node 的包管理工具，後來咱們利用構建工具（下一篇咱們會講到）使得在前端也能使用。值得注意的是，NPM 的全稱不是 Node Package Manager[1]。不知道同窗們有沒有據說過 Node，這裏簡單說一下：它是一個 JavaScript 的運行環境（RunTime），它可使 JavaScript 運行在非瀏覽器環境當中，這意味着咱們可讓 JavaScript 跑在服務器或者本地環境當中。咱們今天所介紹的全部工具，都是基於 Node 編寫的。

NPM 怎麼幫咱們來完成剛剛咱們說的三個環節呢？

下面咱們切換到 Terminal，而且建立一個新的文件夾並進入裏面。首先，咱們執行 npm init 來初始化一下 NPM 的配置文件，在命令行執行：

npm init

按下回車後，咱們會進入一個「問答」環節，NPM 會問你一些關於初始化時的信息，好比項目名稱（name）、當前版本（version）等，遇到不懂的你們能夠自行 Google 一下，這裏就再也不展開了。

package.json

「問答」環節結束後，你會看到當前目錄多了一個名爲 package.json 的文件，咱們能夠用 cat 命令獲取一下這個文件的內容：

cat package.json

這是我返回的內容：

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

咱們能夠看到裏面聲明瞭咱們這個項目的名稱、做者之類的咱們剛剛填寫的信息。而且，呆會兒咱們還會往這個文件裏聲明咱們須要用到哪些第三方的庫或框架。

如何用 NPM 來安裝 jQuery？

那麼接下來，假設咱們須要裝 jQuery，咱們可使用這個命令：

npm install jquery

這樣咱們就把 jQuery 安裝好了，並且是最新版本的。

這個時候咱們再經過 ls 看一下項目，比剛剛有什麼區別？是否是多了個 node_modules？咱們進去看一下，咱們能夠看到裏面有一個 jquery 文件夾，再進去 jquery 文件夾，看到它也有一個 package.json，咱們也打開看看。

咱們看到有好多好多的配置項，其中有一些是跟咱們剛剛寫的是相似的，好比 name、author 等，並且咱們能夠看到它的 verion 字段是 3.0（可能因爲時間的不一樣，你們在安裝時或者會比 3.0 更加新），這裏其實就標記了這個 jQuery 如今的版本號。

如何指定安裝某個的版本？

假如說咱們不能用 jQuery 3.0，要用舊版的，好比 1.11.0 版，咱們就使用這樣的命令：

npm install jquery@1.11.0

再看看 jQuery 的 package.json，咱們能夠看到 Version 已經變成 1.11.0 了。

這個時候，我想問一下同窗們，咱們應不該該把 node_modules 放到咱們的版本管理系統好比 git 中去？答案固然是否認的，咱們經過 npm 安裝的都是第三方的庫，並非咱們這個項目自己的代碼，因此它不該該添加到版本管理系統中。以 Git 爲例，咱們應該把 node_modules 添加到 .gitignore 文件中去。

echo "node_modules" >> .gitignore

如何記錄特定的版本？

可是問題又來了，若是咱們把 node_modules 添加到 .gitignore 中去的話，其餘團隊成員怎麼也安裝同版本的 jQuery 呢？其實很簡單，咱們在安裝 jQuery 的時候加一個參數就能夠了：

npm install --save jquery@1.11.0

這個時候咱們來看一下咱們根目錄下的 package.json，咱們能夠看到它裏面多了一個 dependencies 的字段，dependencies 就是依賴的意思。dependencies 裏面還寫了 jQuery 以及對應的版本號 1.11.0。

別人如何根據記錄來安裝指定的版本？

咱們如今來把剛纔的 node_modules 刪掉，目錄裏只留下一個 package.json，咱們再運行一下 npm install：

npm install

完成以後咱們能夠看到，剛剛咱們聲明的版本號爲 1.11.0 的 jQuery 也成功地被安裝到目錄下了。
固然了，若是咱們想把已經安裝過的包卸載掉，那就使用 npm uninstall 就能夠了：

npm uninstall --save jquery

全部的版本都存放在哪裏？

咱們剛剛在敲命令的過程當中已經看到了咱們三個環節中的前兩個，那麼第三個環節就是，咱們須要有一個存放全部 jQuery 版本的地方，其實剛剛咱們已經跟那個地方交互過了，不知道有沒有同窗知道？沒錯，咱們剛剛就是在 npm 的官方倉庫中下載的，那麼咱們怎麼知道官方倉庫中有沒有某個包呢？又或者說咱們在哪裏能查到那些包的文檔呢？很簡單，咱們打開 NPM 的官網就能找到了。

咱們打開 www.npmjs.com，能夠它裏面有一個搜索框，咱們能夠輸入咱們想找的包的名字並在搜索結果中點進去，好比說咱們依然是 jquery，這樣咱們就能夠看到 jQuery 的文檔了。
第一篇咱們就討論到這裏。接下來，我會在下一篇文章當中聊一下第二個問題：《模塊化工具 Webpack ——如何解決命名衝突和依賴混亂問題？》

[1] https://twitter.com/npmjs/status/105690425242820608

個人知乎 Live 將在 12 月 13 日開始，若是你想了解更多關於前端工程師的自身修養，但願成爲一個優雅的前端工程師的話，請 點擊參加《Jasin Yip 的 Live —— 前端工程師的自我修養》