天天看點

用圖表解釋4個有趣的NPM用法

用圖表解釋4個有趣的NPM用法

英文 | https://levelup.gitconnected.com/4-funny-usages-of-npm-you-may-not-know-explained-with-diagrams-de77732e6fc2

翻譯 | 楊小愛

1、 npm 添加 === npm 安裝

如果你嘗試在 npm 官方文檔中搜尋 npm add 指令,你會發現這個指令似乎根本不存在,如下圖:

用圖表解釋4個有趣的NPM用法

但是我們确實可以在終端上使用這個指令:

$ npm add lodash      

實際上,npm add 是 npm install 的别名之一。是以當我們使用 npm add 時,完全等同于為 npm 執行 npm install !

同樣,npm i 也是 npm install 的别名。

用圖表解釋4個有趣的NPM用法

2、npm instal ? 沒關系

細心的讀者可能已經發現,上面副标題中的安裝是這個詞的拼寫錯誤。但它确實有效。

$ npm instal lodash      

其實這是 npm 8.x 版本的一個新特性,叫做容錯設計。如果使用者不小心拼錯了一個單詞,NPM 仍然可以正常工作。

是以在 8.x 版本中,npm install 得到了 9 個别名,分别是:

in, ins, inst, insta, instal, isnt, isnta, isntal, isntall      
用圖表解釋4個有趣的NPM用法

3、可以在每個腳本執行前後執行一些額外的動作

假設我們有一個名為 greet 的腳本:

用圖表解釋4個有趣的NPM用法

現在我們想要:

  • 在greet執行之前輸出一些東西:在greet之前做一些事情;
  • 在greet執行後輸出一些東西:在greet之後做一些事情。

那麼我們應該怎麼做呢?

我們可以添加一個 pregreet 腳本和一個 postgreet 腳本,這是 NPM 的機制,以 pre 和 post 開頭的腳本被視為特殊腳本。

用圖表解釋4個有趣的NPM用法
用圖表解釋4個有趣的NPM用法

這種機制經常在項目自動部署時使用。

4、使用 npm link 安裝一些終端指令

如果您在項目的 package.json 中定義 bin 屬性并将其指向可執行腳本檔案。

例如:

package.json :

{
  "name": "npm-test",
  "bin": {
    "hello-npm-1": "./build/hello.sh"
  }
}      

hello.sh :

echo "hello npm"      

然後我們可以使用 npm link 将它安裝到 shell 指令中:

用圖表解釋4個有趣的NPM用法

圖中:

用圖表解釋4個有趣的NPM用法

這就是在您的計算機上安裝 create-react-app 和 vue-cli 的方式。

總結

以上就是我今天跟你分享的4個關于NPM的有趣用法,希望你學會了,如果還不會的話,請再看一遍。

如果你覺得我今天的内容對你有用的話,請記得點贊我,關注我,并将它分享給你身邊做開發的朋友,也許能夠幫助到他,感謝你的閱讀,祝程式設計愉快!

x

用圖表解釋4個有趣的NPM用法