神奇的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的這一功能給咱們提供了一個極大的靈活性，好比，你能夠在運行腳本以前檢測一下環境，而後運行腳本，而後腳本運行以後，清理腳本運行過程當中產生的中間文件。