問題描述

看到說--save安裝的模塊，會(huì)顯示在dependencies中。并且dependencies中的模塊表示生產(chǎn)環(huán)境的依賴。比如jQuery。

但是我不懂的是，拿jQuery舉例。我為什么要在dependencies中聲明依賴？生產(chǎn)環(huán)境中，我會(huì)直接用script標(biāo)簽引用jQuery，根本不需要dependencies。如果在dependencies中聲明了生產(chǎn)環(huán)境依賴的模塊，會(huì)怎么樣？會(huì)自動(dòng)幫我添加script標(biāo)簽還是比如模塊打包時(shí)，打包生產(chǎn)環(huán)境模塊時(shí)會(huì)把dependencies中的依賴全部打包進(jìn)去？但是據(jù)我所知，比如webpack在模塊打包時(shí)是根據(jù)require的模塊創(chuàng)建的依賴圖表來打包的，所以我不太懂為什么要在dependencies聲明生產(chǎn)環(huán)境依賴。

問題解答

我們?cè)趯?shí)際開發(fā)中會(huì)用到很多模塊，有些模塊（如，gulp，babel，這些放到devDependencies中）都只是開發(fā)環(huán)境中用到的，而jquery是用在生產(chǎn)環(huán)境中，當(dāng)你部署項(xiàng)目到生產(chǎn)環(huán)境時(shí)，執(zhí)行 npm install --production, 只會(huì)安裝dependencies中的模塊，這樣管理模塊就會(huì)很方便

事實(shí)就是那個(gè)字段是設(shè)計(jì)給 node 的，所以你寫不寫都無所謂。

詳細(xì)來說，作為一個(gè)前端項(xiàng)目，你的依賴要么進(jìn)行打包，要么是 script 標(biāo)簽引入，所以你的 deps 字段里面有什么根本不會(huì)影響最終的代碼。

如果你用<script>加入模塊的話，這個(gè)引入JS/CSS的方法本身用不到npm包管理，可以直接忽略package.json的配置問題

如果你使用如webpack進(jìn)行打包。webpack在模塊打包時(shí)是根據(jù)require的模塊創(chuàng)建的依賴圖表來打包的，這的確沒錯(cuò)。但是之后還有一步，就是webpack通過依賴圖表進(jìn)行打包的時(shí)候，如果依賴圖表里有jQuery依賴，webpack還是要去找jQuery的文件，然后注入到打包的文件之中。如果你不寫dependencies的話，在團(tuán)隊(duì)開發(fā)中，另一個(gè)人改了一點(diǎn)代碼，然后用npm install安裝了依賴包，再重新打包的時(shí)候，webpack創(chuàng)建出依賴圖表，依賴圖表中依賴了jQuery，然而webpack在node_modules里卻找不到要注入到目標(biāo)文件的jQuery代碼，這樣他重新打包就會(huì)失敗。當(dāng)然，如果你只有自己一個(gè)人開發(fā)的話，可以忽略這一點(diǎn)。

當(dāng)然，dependencies還有一種應(yīng)用情況，比如說我之前寫的一個(gè)node.js爬蟲。由于這個(gè)爬蟲是直接用node運(yùn)行JS代碼的，所以我的JS文件里面require()的包都需要寫在dependencies里，部署的時(shí)候用npm install安裝完這些依賴，require才能夠讀取到對(duì)應(yīng)的包。

我覺得你可能是因?yàn)樾枰褂脀ebpack去開發(fā)頁(yè)面，才使用node的。否則你不會(huì)去問dependencies和script之間的關(guān)系。這兩者之間毫無關(guān)系。

這里你揉雜了3個(gè)東西：

package.json的依賴管理

webpack的依賴管理

html中的腳本引入

node不只是可以用來做頁(yè)面開發(fā)，還可以做很多事情，比如開發(fā)服務(wù)器程序，開發(fā)JS庫(kù)等等。dependencies記錄和保證你的項(xiàng)目在被使用時(shí)的依賴；devDependencies記錄和保證你的項(xiàng)目在被開發(fā)時(shí)的依賴。

舉一個(gè)例子，我們開發(fā)一個(gè)庫(kù)，并準(zhǔn)備發(fā)布在NPM上。需要使用lodash.sample，開發(fā)時(shí)使用es6，并且還使用eslint對(duì)代碼風(fēng)格進(jìn)行規(guī)范。那么dependencies中就有l(wèi)odash.sample，devDependencies就有babel和eslint。

dependencies就保證了任何人在install我們這個(gè)庫(kù)的時(shí)候，lodash.sample都會(huì)被安裝（否則這個(gè)庫(kù)將無法正確運(yùn)行）；devDependencies保證任何人在（或者你自己在其他設(shè)備上）對(duì)這個(gè)項(xiàng)目進(jìn)行修改（開發(fā)）時(shí)，通過npm install就能獲取同樣的開發(fā)環(huán)境（打包，轉(zhuǎn)碼嗎，約束，構(gòu)建等）。想想，如果你在另外一臺(tái)電腦上，想對(duì)開發(fā)這個(gè)庫(kù)的2.0版本，如果沒有devDependencies，你就需要手動(dòng)的再次安裝babel和eslint等，要不你就要去從最初的項(xiàng)目中copy整個(gè)node_modules文件夾。

webpack是一個(gè)構(gòu)建工具，可以用在頁(yè)面的開發(fā)中去，也可以用在其他地方。webpack的依賴管理確實(shí)是通過require尋找依賴，它不依賴dependencies。

還是上面庫(kù)的例子，我們可以使用webpack進(jìn)行打包（那么devDependencies中應(yīng)該有webpack）。就算你npm install --save了其他十幾個(gè)模塊，webpack時(shí)，也只會(huì)將lodash.sample打進(jìn)來。

webpack在用來開發(fā)頁(yè)面時(shí)，最先開始是將打包的js文件，手動(dòng)的在html中以script形式引入，但是后來有插件幫我們自動(dòng)完成這個(gè)過程。后來一些腳手架工具如vue-cli，內(nèi)置負(fù)責(zé)的webpack配置，將整個(gè)過程優(yōu)化和自動(dòng)化。加上整個(gè)開發(fā)過程在node中完成，因此可能導(dǎo)致了你誤以為dependencies和script之間是否有聯(lián)系。

回到你的問題：“為什么要在dependencies聲明生產(chǎn)環(huán)境依賴”

原因是：不記錄這些依賴，其他人（或者你自己在其他設(shè)備上）進(jìn)行再開發(fā)時(shí)，無法知道該項(xiàng)目需要引入哪些依賴，無法進(jìn)行開發(fā)。如果你只是一個(gè)人不切換電腦的話，dependencies可以不使用。

工作環(huán)境改變的時(shí)候，你的項(xiàng)目要是想正常運(yùn)行。必須聲明依賴，這樣不管在哪里，只需要一句npm install即可還原工作環(huán)境，依賴什么的全部解決