引言

前端需要學習的東西真的挺多的，之前主要從事的是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，啟動

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

引申：package-lock.json

1. package.json文件記錄你項目中所需要的所有模塊。當你執行npm install的時候，node會先從package.json文件中讀取所有dependencies信息，然後根據dependencies中的信息與node_modules中的模塊進行對比，沒有的直接下載，已有的檢查更新（最新版本的nodejs不會更新，因為有package-lock.json文件，下麵再說）。另外，package.json文件只記錄你通過npm install方式安裝的模塊信息，而這些模塊所依賴的其他子模塊的信息不會記錄。
2. package-lock.json文件鎖定所有模塊的版本號，包括主模塊和所有依賴子模塊。當你執行npm install的時候，node從package.json文件讀取模塊名稱，從package-lock.json文件中獲取版本號，然後進行下載或者更新。因此，正因為有了package-lock.json文件鎖定版本號，所以當你執行npm install的時候，node不會自動更新package.json文件中的模塊，必須用npm install packagename（自動更新小版本號）或者npm install [email protected]（指定版本號）來進行安裝才會更新，package-lock.json文件中的版本號也會隨著更新。
3. 附：當package.json與package-lock.json都不存在，執行"npm install"時，node會重新生成package-lock.json文件，然後把node_modules中的模塊信息全部記入package-lock.json文件，但不會生成package.json文件，此時，你可以通過"npm init --yes"來初始化生成package.json文件。

總結：

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