神奇的npm -- scripts

作為一個入門的前端開發，隨時隨地可以都可以來一波秀瞎小白的命令列操作: npm i、npm run dev、npm run build ...

但是你真的知道這些命令怎麼來的嗎？怎麼用的嗎？

當然作為初級入門的前端實習生來說，前一個問題根本不算問題，直接在package.json中的scripts標籤下新增一些命令就可以了，例如（bash環境下）：

{
    "scripts": {
        "hello": "echo hello world"
    }
}
複製程式碼

然後，在命令列中輸入npm run hello，就會輸出hello world。 是不是跟當時學c語言的時候，老師讓你們寫的makefile很類似？這裡也可以使用make來完成剛才的操作。

那麼除了這種用法，還有其他用法嗎？當然有了，先扔官方文件docs.npmjs.com/misc/script…，有英文基礎的可以直接看官網，不用看下面了。

npm的scripts中給了一下幾個類似鉤子的命令，允許你在安裝釋出時處理一些其他的操作：

• prepublish: 當你要釋出或者打包或者在本地安裝的時候，出觸發這個命令
• prepare: 會在prepublish與prepublishOnly之間觸發，以下幾種情況會觸發這個命令:
  • 打包或者釋出之前
  • 安裝git連結的dependencies
  • 本地包的npm install，並且不帶任何引數
• prepublishOnly: 在prepare和prepack之間觸發，只有執行npm publish，才會觸發這個命令
• prepack: 在打包之前執行，觸發條件：
  • npm pack
  • npm publish
  • 安裝一個git連結的依賴
• postpack: 打包完成之後觸發
• publish, postpublish: 釋出成功之後觸發
• preinstall: 安裝之前觸發
• install, postinstall: 安裝之後觸發
• preuninstall, uninstall: 解除安裝之前觸發
• postuninstall: 解除安裝之後觸發
• ...

還有很多，如start，不一一列舉了，最重要的是npm為scripts中所有命令都提供了三個階段鉤子：開始執行之前、執行、執行結束。比如上面新增的hello命令，你可以改成下面的樣子：

{
    "scripts": {
        "prehello": "echo 執行hello之前",
        "hello": "echo hello world",
        "posthello": "echo 執行hello之後"
    }
}
複製程式碼

這時候你再執行npm run hello，你會發現控制檯一次輸出上面三個資訊。

npm的這一功能給我們提供了一個極大的靈活性，比如，你可以在執行指令碼之前檢測一下環境，然後執行指令碼，然後指令碼執行之後，清理指令碼執行過程中產生的中間檔案。