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