前端開(kāi)發(fā)是一個(gè)需要不斷學(xué)習(xí)和更新的領(lǐng)域，隨著技術(shù)的發(fā)展，我們需要使用各種工具和框架來(lái)提高我們的開(kāi)發(fā)效率和質(zhì)量。但是，在使用這些工具和框架之前，我們首先要做的一件事就是安裝依賴。
什么是依賴？簡(jiǎn)單來(lái)說(shuō)，就是我們的項(xiàng)目需要用到的其他的代碼庫(kù)或者模塊，比如jQuery，React，Bootstrap等等。這些依賴可以幫助我們實(shí)現(xiàn)一些常用的功能，或者提供一些優(yōu)秀的設(shè)計(jì)和交互。但是，如果我們要手動(dòng)下載和管理這些依賴，那么就會(huì)非常麻煩和耗時(shí)。所以，我們需要使用一些專門的工具來(lái)幫助我們自動(dòng)化地安裝和更新依賴，這就是我們要介紹的內(nèi)容。
目前，前端開(kāi)發(fā)中最常用的兩個(gè)依賴管理工具是npm和yarn。它們都是基于Node.js的命令行工具，可以讓我們?cè)陧?xiàng)目中使用package.json文件來(lái)定義我們需要的依賴，并且通過(guò)一些簡(jiǎn)單的命令來(lái)安裝和更新它們。下面，我們就來(lái)看看如何使用這兩個(gè)工具來(lái)安裝依賴。
npm是Node.js的默認(rèn)包管理器，它已經(jīng)隨著Node.js一起安裝在了我們的電腦上。要使用npm來(lái)安裝依賴，我們只需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)package.json文件，或者使用npm init命令來(lái)自動(dòng)生成一個(gè)。然后，在package.json文件中的dependencies或者devDependencies字段中添加我們需要的依賴名稱和版本號(hào)，比如：
{
"name": "my-project",
"version": "1.0.0",
"dependencies": {
"jquery": "^3.6.0",
"react": "^17.0.2",
"bootstrap": "^5.1.0"
},
"devDependencies": {
"webpack": "^5.51.1",
"babel": "^7.15.4"
}
}注意，dependencies和devDependencies的區(qū)別是，前者是我們項(xiàng)目運(yùn)行時(shí)需要的依賴，后者是我們項(xiàng)目開(kāi)發(fā)時(shí)需要的依賴。一般來(lái)說(shuō)，我們把一些打包，編譯，測(cè)試等工具放在devDependencies中，把一些UI庫(kù)，框架等放在dependencies中。
添加好了依賴之后，我們就可以在項(xiàng)目根目錄下運(yùn)行npm install命令來(lái)安裝所有的依賴。這個(gè)命令會(huì)根據(jù)package.json文件中的信息，在項(xiàng)目中創(chuàng)建一個(gè)node_modules文件夾，并且把所有的依賴下載到這個(gè)文件夾中。同時(shí)，它還會(huì)生成一個(gè)package-lock.json文件，用來(lái)記錄每個(gè)依賴的確切版本號(hào)和來(lái)源。這樣可以保證我們?cè)诓煌沫h(huán)境中安裝相同的依賴。
如果我們只想安裝某一個(gè)或者某幾個(gè)依賴，而不是全部，我們可以在npm install命令后面加上依賴的名稱，比如npm install jquery或者npm install react bootstrap。這樣就只會(huì)安裝指定的依賴，并且也會(huì)更新package.json和package-lock.json文件。
如果我們想更新已經(jīng)安裝的某個(gè)或者某幾個(gè)依賴，我們可以使用npm update命令，并且加上依賴的名稱，比如npm update jquery或者npm update react bootstrap。這樣就會(huì)檢查這些依賴是否有新的版本，如果有，就會(huì)下載并替換舊的版本，并且更新package.json和package-lock.json文件。
如果我們想卸載已經(jīng)安裝的某個(gè)或者某幾個(gè)依賴，我們可以使用npm uninstall命令，并且加上依賴的名稱，比如npm uninstall jquery或者npm uninstall react bootstrap。這樣就會(huì)刪除這些依賴，并且更新package.json和package-lock.json文件。
以上就是使用npm來(lái)安裝依賴的基本方法，相信你已經(jīng)掌握了。但是，npm并不是唯一的選擇，還有一個(gè)更加流行和高效的工具，那就是yarn。關(guān)于yarn的介紹我們將放在另一篇文章中進(jìn)行介紹，感興趣的小伙伴可以持續(xù)關(guān)注W3Cschool猿筆記。
