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

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

在開始之前，請允許我打一個廣告，我的 知乎 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]（感謝 @Shaopeng 勘誤）。不知道同學們有沒有聽說過 Node，這裡簡單說一下：它是一個 JavaScript 的運行環境（RunTime），它可以使 JavaScript 運行在非瀏覽器環境當中，這意味著我們可以讓 JavaScript 跑在伺服器或者本地環境當中。我們今天所介紹的所有工具，都是基於 Node 編寫的。

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

下面我們切換到 Terminal，並且創建一個新的文件夾並進入裡面。首先，我們執行 npm init 來初始化一下 NPM 的配置文件：

npm initn

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

package.json

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

cat package.jsonn

這是我返回的內容：

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

我們可以看到裡面聲明了我們這個項目的名稱、作者之類的我們剛剛填寫的信息。並且，呆會兒我們還會往這個文件里聲明我們需要用到哪些第三方的庫或框架。

如何用 NPM 來安裝 jQuery？

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

npm install jqueryn

這樣我們就把 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.0n

再看看 jQuery 的 package.json，我們可以看到 Version 已經變成 1.11.0 了。

這個時候，我想問一下同學們，我們應不應該把 node_modules 放到我們的版本管理系統比如 git 中去？答案當然是否定的，我們通過 npm 安裝的都是第三方的庫，並不是我們這個項目本身的代碼，所以它不應該添加到版本管理系統中。以 Git 為例，我們應該把 node_modules 添加到 .gitignore 文件中去。

echo "node_modules" >> .gitignoren

如何記錄特定的版本？

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

npm install --save jquery@1.11.0n

這個時候我們來看一下我們根目錄下的 package.json，我們可以看到它裡面多了一個 dependencies 的欄位，dependencies 就是依賴的意思。dependencies 裡面還寫了 jQuery 以及對應的版本號 1.11.0。

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

我們現在來把剛才的 node_modules 刪掉，目錄里只留下一個 package.json，我們再運行一下 npm install：

npm installn

完成之後我們可以看到，剛剛我們聲明的版本號為 1.11.0 的 jQuery 也成功地被安裝到目錄下了。

當然了，如果我們想把已經安裝過的包卸載掉，那就使用 npm uninstall 就可以了：

npm uninstall --save jqueryn

所有的版本都存放在哪裡？

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

我們打開 www.npmjs.com，可以它裡面有一個搜索框，我們可以輸入我們想找的包的名字並在搜索結果中點進去，比如說我們依然是 jquery，這樣我們就可以看到 jQuery 的文檔了。

第一篇我們就討論到這裡。接下來，我會在下一篇文章當中聊一下第二個問題：《模塊化工具 Webpack ——如何解決命名衝突和依賴混亂問題？》

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

點擊參加《Jasin Yip 的 Live —— 前端工程師的自我修養》

推薦閱讀：