引言

前端需要學習的東西真的挺多的，之前主要從事的是MVC框架，操作DOM，使用JQUERY比較多，不知到什麼時候，發現現在前端MVVM是主流，不得不把之前的大部分東西丟掉，作為前端嬰兒不斷前行。

所以以後的文章，可能開始都比較基礎，希望大拿不要見笑，若有不對的地方，希望指正，我也會不斷修正迭代。

在學習MVVM（react和vue）的時候，開始就是會找iview，element，ant-pro等現成的東西，去改。CLI直接安裝，也沒有想去學習webpack。現在看更早一點的自己，真的是傻的可愛，就是那種沒有方法的新手，弄出來完事。真的要專注一個領域，還是要每個方面都要研究透，要有邏輯的思考。

以下，就是在工作過程中，自己提問題，自己找答案的。有時候覺得挺有趣，看著看著，發現原來npm指令是這樣來的，那不僅要弄清楚webpage，npm後續也要多學習。在程式裡，任何東西都是有關聯的。

生命不息，行走不止，學習不停。

1.概念

Node.js專案遵循模組化的架構，當我們建立了一個Node.js專案，意味著建立了一個模組，這個模組的描述檔案，被稱為package.json

亦即：模組的描述檔案 =package.json

2.屬性

name：包名

version：版本號

main 入口檔案

license：專案許可

scripts：宣告一系列npm指令碼指令

dependencies：專案在生產環境中依賴的包-install的東西

devDependencies：專案在開發和測試環境中依賴的包

repository: 專案程式碼存放地方（git地址）

3.生成

自己生成package.json，在專案根目錄下面npm init即可

另，解決了一個疑問，安裝專案的時候，用的命令為什麼不同？什麼時候用npm run dev，什麼時候用npm start ？

答案：看scripts

"scripts": {
    "start": "set NODE_ENV='development' && webpack-dev-server --inline --progress --config ./build/webpack.config.development.js",
    "build": "set NODE_ENV='development' && webpack --config ./build/webpack.config.production.js"
},
 

在package.json的script裡面看配置的指令碼指令，再檢視對應的檔案。

start裡面可以看到埠；build打包編譯，start，啟動

有點小開心哦！嗯，明白了！

PPT模板下載大全https://www.wode007.com

引申：package-lock.json

package.json檔案記錄你專案中所需要的所有模組。當你執行npminstall的時候，node會先從package.json檔案中讀取所有dependencies資訊，然後根據dependencies中的資訊與node_modules中的模組進行對比，沒有的直接下載，已有的檢查更新（最新版本的nodejs不會更新，因為有package-lock.json檔案，下面再說）。另外，package.json檔案只記錄你通過npminstall方式安裝的模組資訊，而這些模組所依賴的其他子模組的資訊不會記錄。

package-lock.json檔案鎖定所有模組的版本號，包括主模組和所有依賴子模組。當你執行npminstall的時候，node從package.json檔案讀取模組名稱，從package-lock.json檔案中獲取版本號，然後進行下載或者更新。因此，正因為有了package-lock.json檔案鎖定版本號，所以當你執行npminstall的時候，node不會自動更新package.json檔案中的模組，必須用npminstallpackagename（自動更新小版本號）或者[email protected]（指定版本號）來進行安裝才會更新，package-lock.json檔案中的版本號也會隨著更新。

附：當package.json與package-lock.json都不存在，執行"npminstall"時，node會重新生成package-lock.json檔案，然後把node_modules中的模組資訊全部記入package-lock.json檔案，但不會生成package.json檔案，此時，你可以通過"npminit--yes"來初始化生成package.json檔案。

總結：

專案中引入的包版本號之前經常會加^號，每次在執行npminstall之後，下載的包都會發生變化，為了系統的穩定性考慮，每次執行完npminstall之後會建立或者更新package-lock檔案。該檔案記錄了上一次安裝的具體的版本號，相當於是提供了一個參考，在出現版本相容性問題的時候，就可以參考這個檔案來修改版本號即可。

重新install刪掉lock