2020-3-26 seo達人
網上對于這兩個的區別解釋都是統一口徑的，一個是開發依賴，一個是線上依賴，打包發布需要用到的要添加到線上依賴，一模一樣的回答，誤導了很多人。今天自己測試一下這兩個命令，記錄一下。
–save-dev，會在devDependencies里面添加依賴
-D，會在devDependencies里面添加依賴
–save，會在dependencies里面添加依賴
-S，會在dependencies里面添加依賴
devDependencies和dependencies可以同時存在同一個包的依賴。
如果npm install xxx后面沒有輸入要保存到哪個里面，devDependencies和dependencies都沒有。
我這邊直接npm install jquery，node_modules下有jQuery。然后我刪除node_modules,執行npm install，node_modules下并沒有下載jQuery。
所以，安裝依賴的時候如果沒有加上要依賴到開發還是線上，只是臨時的在node_modules里面幫你下載，而devDependencies和dependencies的依賴都會幫你下載。
然后我在devDependencies下安裝依賴：
"devDependencies": {
"html-webpack-plugin": "^4.0.3",
"jquery": "^3.4.1",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
在入口文件引用和打印jQuery：
import $ from 'jquery'
console.log($)
打包之后，可以使用jQuery。
然后我在dependencies下安裝依賴：
"dependencies": {
"html-webpack-plugin": "^4.0.3",
"jquery": "^3.4.1",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
在入口文件引用和打印jQuery：
import $ from 'jquery'
console.log($)
打包之后，可以使用jQuery。
測試的結果就是，無論是–save還是–save-dev，對于打包都沒有任何影響。devDependencies和dependencies兩種情況，打包出來的main.js都把jQuery打包進去。這兩種情況，如果都沒有引用jQuery的情況下，也都不會把jQuery打包。
接著在一個空白的項目里面下載axios,npm install axios -S,打開node_modules文件夾：
發現多出了另外三個依賴，查看axios下的package.json：
"dependencies": {
"follow-redirects": "1.5.10"
}
查看follow-redirects下的package.json：
"dependencies": {
"debug": "=3.1.0"
}
查看debugs下的package.json：
"dependencies": {
"ms": "2.0.0"
}
最后ms的package.json沒有dependencies。
而這幾個包的devDependencies依賴的包沒有一個下載。
接著我在node_modules把follow-redirects、debugs、ms都刪了，把axios里面的package.js的dependencies給刪了，然后執行npm install,發現沒有下載follow-redirects、debugs、ms這幾個，也證明了如果node_modules里面有下載的包，是不會重新去下載的。我把node_modules刪除，執行npm install，這幾個包又都下載下來了。
最后得出 的結論是，–save-dev和–save在平時開發的時候，對于打包部署上線是沒有任何影響的。如果你是發布一個包給別人用，而你開發的包依賴第三方的包，那么你如果是–save，那么別人安裝你開發的包，會默認下載你依賴的包，如果你是–save-dev，那么別人安裝你開發的包，是不會默認幫忙下載你依賴的包。
其實發布的包如果沒有必要，很少會默認幫你下載，比如bootstrap，依賴jQuery，怕你原本就下載了引起沖突，也不會在dependencies里面安裝jQuery而是：
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.16.0"
}
表示bootstrap依賴于這兩個包，你必須安裝，版本不固定，但是一定要安裝這兩個包，安裝的時候會有警告：
peerDependencies WARNING bootstrap@ requires a peer of [email protected] - 3 but none was installed
peerDependencies WARNING bootstrap@ requires a peer of popper.js@^1.16.0 but none was installed
當你引用了然后打包，報錯：
ERROR in ./node_modules/[email protected]@bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in 'C:\Users\wade\Desktop\savedev\[email protected]@bootstrap\dist\js'
@ ./node_modules/[email protected]@bootstrap/dist/js/bootstrap.js 7:82-99
@ ./src/index.js
ERROR in ./node_modules/[email protected]@bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'C:\Users\wade\Desktop\savedev\[email protected]@bootstrap\dist\js'
@ ./node_modules/[email protected]@bootstrap/dist/js/bootstrap.js 7:101-121
@ ./src/index.js
以上就是對–save和–save-dev的一些測試，想更快的得出結論其實是自己發布一個包。至于本人的答案是不是存在錯誤，歡迎指出，因為只是自己簡單測試的結果。