npm script和package-lock.json使用示例詳解
npm script指南
這篇文章我們將來學習一下 package.json
文件中的 script
字段以及 npm
其他的知識,直接進入正題。
npm
腳本是 package.json
中定義的一組內(nèi)置腳本和自定義腳本,它們的模板是提供一種簡單的命令來執(zhí)行重復(fù)或者復(fù)雜的任務(wù),例如:
- 啟動一個
react
項目; - 使用
webpack
對項目進行打包; - 等等;
每個腳本命令都有一個生命周期,執(zhí)行前做些什么,執(zhí)行的時候做些什么,執(zhí)行完成之后做些什么,例如,在 script
字段中添加兩個腳本命令,它們分別是 prestart
和 poststart
,具體代碼如下:
"scripts": { "prestart": "echo 我首先執(zhí)行", "start": "node index.js", "poststart": "echo 我最后執(zhí)行" },
在終端中執(zhí)行 npm start
,然后再查看控制臺,會有以下輸出:
npm
還可以通過 npm_package_字段名稱
來獲取 package.json
中的信息,需要執(zhí)行 script
腳本,例如在 package.json
中有以下定義:
"scripts": { "start": "node index.js" },
在 index.js
文件中有以下代碼:
console.log(process.env.npm_package_version);
在終端中執(zhí)行 npm start
之后,發(fā)現(xiàn) package.json
中的版本信息被輸出出來了。在這里是通過環(huán)境變量 process.env
拿到 package.json
的字段值。
你還可以在終端中執(zhí)行命令前添加更多的字段,例如:
npm start moment supper
你可以使用 process.argv
來獲取傳進來的參數(shù),通過打印會有以下輸出:
從數(shù)組第二個值開始便是我們額外傳入的參數(shù)。
有的項目在啟動時可能需要同時執(zhí)行多個任務(wù),多個任務(wù)的執(zhí)行順序決定了項目的表現(xiàn)。
串行執(zhí)行,要求前一個任務(wù)執(zhí)行成功以后才能執(zhí)行下一個任務(wù),使用 &&
符號來連接,例如:
"scripts": { "start": "node index.js && node test.js" },
在串行命令執(zhí)行中,只要有一個執(zhí)行失敗,則整個腳本結(jié)束,在下面的圖片中,第一個命令出錯,后面不會有任何輸出:
與上面整個執(zhí)行方式不同的是并行執(zhí)行,就是多個命令可以同時的評選執(zhí)行,使用 &
符號來連接:
"scripts": { "start": "node index.js & node test.js" },
在這里,如果有其中一個報錯了,剩下的依然能正常執(zhí)行.具體效果如下所示:
package-lock.json
當我們運行 npm install
命令之后,會發(fā)現(xiàn)自動生成了一個新文件 package-lock.json
,該文件當 npm
修改 node_modules
樹或者 package.json
文件時,該文件會自動修改,如果是手動修改會在下一次執(zhí)行 npm install
時進行修改。
package-lock.json
文件旨在提交到代碼創(chuàng)庫中,例如 GitHub
中,用于各種目的:
- 描述依賴關(guān)系樹的單一具體表示形式,以保證團隊開發(fā)和部署時安裝完全相同的依賴關(guān)系;
- 為用戶提供一種
time-travel
到以前的狀態(tài)的工具,意思就是說你之前在node_modules
中使用的版本是什么,當你把node_modules
文件刪除之后將代碼分享給別人,他們通過npm install
下載到的包版本也是一致; - 優(yōu)化安裝速度,如果存在的包,且版本相同則跳過,提高速度;
package-lock.json
的生成邏輯可以看下面的例子進行講解,例如,在我們的項目 moment
中,安裝依賴包 X
,依賴包 X
中依賴著包 Y
,并且 Y
依賴 Z
,具體依賴關(guān)系請看以下代碼:
// project moment { "name": "moment", "dependencies": { "X": "^1.0.0" }} // package X { "name": "X", "version": "1.0.0", "dependencies": { "Y": "^1.0.0" }} // package B { "name": "Y", "version": "1.0.0", "dependencies": { "Z": "^1.0.0" }} // package Z { "name": "Z", "version": "1.0.0" }
在這種情況下 package-lock.json
文件會生成類似以下內(nèi)容:
// package-lock.json { "name": "moment", "version": "1.0.0", "dependencies": { "X": { "version": "1.0.0" }, "Y": { "version": "1.0.0" }, "Z": { "version": "1.0.0" } } }
在我們后面的開發(fā)中,如果我們不修改 package.json
文件,那么 package-lock.json
文件就永遠都不會被重新生成,即使 X
包發(fā)布了新版本,雖然我們 package.json
文件中寫的是 ^1.0.0
,但是因為 package-lock.json
文件的存在,執(zhí)行 npm install
并不會自動升級。
總的來說,package.json
文件是指定依賴包能使用的范圍,而 package-lock.json
文件是使用這個范圍中的一個具體值。
參考文章 package.json 與 package-lock.json 的關(guān)系
以上就是npm script和package-lock.json使用示例詳解的詳細內(nèi)容,更多關(guān)于npm script package-lock.json的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
一道優(yōu)雅面試題分析js中fn()和return fn()的區(qū)別
這篇文章主要帶領(lǐng)大家深入理解JavaScript中 fn() 和 return fn() 的區(qū)別,感興趣的小伙伴們可以參考一下2016-07-07js下拉框二級關(guān)聯(lián)菜單效果代碼具體實現(xiàn)
這篇文章介紹了js下拉框二級關(guān)聯(lián)菜單效果代碼具體實現(xiàn),有需要的朋友可以參考一下2013-08-08javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時編碼中,經(jīng)常要做拼接字符串的工作,如把json數(shù)據(jù)用HTML展示出來,以往字符串拼接與邏輯混在在一起會讓代碼晦澀不堪,加大了多人協(xié)作與維護的成本。而采用前端模板機制就能很好的解決這個問題2011-10-10JS Html轉(zhuǎn)義和反轉(zhuǎn)義(html編碼和解碼)的實現(xiàn)與使用方法總結(jié)
這篇文章主要介紹了JS Html轉(zhuǎn)義和反轉(zhuǎn)義(html編碼和解碼)的實現(xiàn)與使用方法,結(jié)合實例形式總結(jié)分析了JS Html轉(zhuǎn)義和反轉(zhuǎn)義、html編碼和解碼相關(guān)封裝類定義與具體使用技巧,需要的朋友可以參考下2020-03-03javascript使用數(shù)組的push方法完成快速排序
排序的方法有很多,本節(jié)為大家介紹的是使用數(shù)組的push方法完成快速排序,當然你也可以舉一反三2014-09-09