問題描述

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

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

問題解答

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

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

詳細來說，作為一個前端項目，你的依賴要么進行打包，要么是 script 標簽引入，所以你的 deps 字段里面有什么根本不會影響最終的代碼。

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

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

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

我覺得你可能是因為需要使用webpack去開發(fā)頁面，才使用node的。否則你不會去問dependencies和script之間的關(guān)系。這兩者之間毫無關(guān)系。

這里你揉雜了3個東西：

package.json的依賴管理

webpack的依賴管理

html中的腳本引入

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

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

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

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

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

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

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

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

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