npm script指南

這篇文章我們將來學(xué)習(xí)一下 package.json 文件中的 script字段以及 npm 其他的知識(shí)，直接進(jìn)入正題。

npm 腳本是 package.json 中定義的一組內(nèi)置腳本和自定義腳本,它們的模板是提供一種簡(jiǎn)單的命令來執(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 還可以通過 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 來獲取傳進(jìn)來的參數(shù),通過打印會(huì)有以下輸出:

從數(shù)組第二個(gè)值開始便是我們額外傳入的參數(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)來連接,例如:

  "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)來連接:

  "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 樹或者 package.json 文件時(shí),該文件會(huì)自動(dòng)修改,如果是手動(dòng)修改會(huì)在下一次執(zhí)行 npm install 時(shí)進(jìn)行修改。

package-lock.json 文件旨在提交到代碼創(chuàng)庫中,例如 GitHub中,用于各種目的:

• 描述依賴關(guān)系樹的單一具體表示形式,以保證團(tuán)隊(duì)開發(fā)和部署時(shí)安裝完全相同的依賴關(guān)系;
• 為用戶提供一種 time-travel 到以前的狀態(tài)的工具,意思就是說你之前在 node_modules 中使用的版本是什么,當(dāng)你把 node_modules 文件刪除之后將代碼分享給別人,他們通過 npm install 下載到的包版本也是一致;
• 優(yōu)化安裝速度,如果存在的包,且版本相同則跳過,提高速度;

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" }  
    }
}

在我們后面的開發(fā)中,如果我們不修改 package.json 文件,那么 package-lock.json 文件就永遠(yuǎn)都不會(huì)被重新生成,即使 X 包發(fā)布了新版本,雖然我們 package.json 文件中寫的是 ^1.0.0,但是因?yàn)?package-lock.json 文件的存在,執(zhí)行 npm install 并不會(huì)自動(dòng)升級(jí)。

總的來說,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)文章！