關於NPM你必須要知道的常用命令

npm:全稱node package mananger，是世界上最大規模的包管理系統，官網是這樣介紹的 Build amazing things...

那咱們就來看看他做了哪些驚人的事~

一.npm init

默認大家肯定比較熟悉了，直接 npm init -y了事，這回我們再來仔細看看

{
  "name": "webyouxuan",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {},
  "license": "ISC"
}

這裏先聲明npm的版本是6.7.0，因爲我的node版本是v11.14.0

咱們來逐個說說這裏比較重要的字段:name、version、main、scripts、license

• name是當前包的名字，也就是最終發佈在npm官網上包的名字。不能和已有的包重名哦！
• version就是當前包的版本號，主要我們要探究如果優雅的管理版本號。
• main就是當前包的入口文件，也就是使用require默認引入的文件。
• scripts可以配置一些執行腳本。
• license是協議許可。

二.npm install

1.全局安裝

npm install http-server -g

全局安裝的意思很簡單，就是安裝的模塊會被安裝到全局下，可以在命令行中直接使用安裝的包,其實只是在/user/local/bin目錄下作了個鏈接，連接到 /usr/local/lib/node_modules/http-server/bin/http-server了這個文件，當我們執行http-server這個命令時，就會調用鏈接的這個文件。

mac因爲有權限問題，這裏我們加sudo來執行命令

我們可以自己來嘗試寫一個包，創建bin目錄，新增www文件,名字叫什麼無所謂啦~

#! /usr/bin/env node
console.log('關注webyouxuan哈'); // #! 這句表示採用node來執行此文件，同理shell可以表示sh

更新package.json文件

"bin": {
    "youxuan":"./bin/www"   // 這裏要注意名字和你建立的文件夾要相同
},

好了，寫好啦！這裏我們先不說發包的事，用一個常用的命令，他可以實現鏈接的功能：

npm link

[圖片上傳失敗...(image-a09819-1567445632022)]

這樣我們在命令行中直接輸入youxuan就可以打印出關注webyouxuan！

2.本地安裝

npm install webpack --save-dev

本地安裝很好理解，就是所謂的在項目中使用，而非在命令行中使用！這裏我們看到生成了一個package-lock.json文件，而且將安裝的模塊放到了node_modules下，而json中也新增了些內容

"devDependencies": {
    "webpack": "^4.39.3"
}

這裏我們先來簡單介紹下基本的使用

--save-dev代表當前依賴只在開發時被應用，如果默認不寫則相當於 --save，是項目依賴開發上線都需要的

也可以指定版本號來安裝包

npm i [email protected] # install可以簡寫成i

默認執行npm i會安裝項目中所有需要的依賴，如果只想安裝生產環境的依賴可以增加--production參數

三.package-lock文件

自npm 5之後所有的依賴包都採用扁平化管理的方式
package-lock.json 的作用是鎖定依賴安裝結構，保證在任意機器上執行 npm install 都會得到完全相同的 node_modules 結果，因爲package-lock.json存儲了所有安裝的信息。

"name": "youxuan",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@webassemblyjs/ast": { 
    "version": "1.8.5", // 當前依賴的版本
    "resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.8.5.tgz", // 從哪個渠道安裝的
    "integrity": "sha1-UbHF/mV2o0lTv0slPfnw1JDZ41k=", // 內容hash
    "dev": true,
    "requires": {
    "@webassemblyjs/helper-module-context": "1.8.5",
    "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
    "@webassemblyjs/wast-parser": "1.8.5"
    }
},
....

如果手動更新了package.json文件，執行安裝命令會下載對應的新版本,並且會自動更新lock文件~

四.依賴方式

簡單介紹下常見的依賴方式：

1.dependencies 項目依賴

可以使用npm install -S或 npm install --save保存到依賴中，當發佈到npm上時dependencies下的模塊會作爲依賴，一起被下載!

2.devDependencies 開發依賴

可以使用npm install -D或 npm install --save-dev保存到依賴中。
當發佈到npm上時devDependencies下面的模塊就不會自動下載了，如果只是單純的開發項目dependencies，devDependencies只有提示的作用！

3.peerDependencies 同版本依賴

同等依賴，如果你安裝我，那麼你最好也安裝我對應的依賴，如果未安裝會報出警告

"peerDependencies": {
    "jquery": "2.2.0"
}

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

4.bundledDependencies 捆綁依賴

"bundleDependencies": [
    "jquery"
 ],

使用npm pack 打包tgz時會將捆綁依賴一同打包。

5.optionalDependencies 可選依賴

如果發現無法安裝或無法找到，則不會影響npm的安裝。

五.npm版本管理

npm採用了semver規範作爲依賴版本管理方案。semver 約定一個包的版本號必須包含3個數字

MAJOR.MINOR.PATCH 意思是 主版本號.小版本號.修訂版本號

• MAJOR 對應大的版本號迭代，做了不兼容舊版的修改時要更新 MAJOR 版本號
• MINOR 對應小版本迭代，發生兼容舊版API的修改或功能更新時，更新MINOR版本號
• PATCH 對應修訂版本號，一般針對修復 BUG 的版本號

當我們每次發佈包的時候都需要升級版本號

npm version major  # 大版本號加 1，其餘版本號歸 0
npm version minor  # 小版本號加 1，修訂號歸 0
npm version patch  # 修訂號加 1

如果使用git管理項目會自動 git tag 標註版本號

來看看版本號的標識含義:

range	含義	例
^2.2.1	指定的 MAJOR 版本號下, 所有更新的版本	匹配 2.2.3, 2.3.0; 不匹配 1.0.3, 3.0.1
~2.2.1	指定 MAJOR.MINOR 版本號下，所有更新的版本	匹配 2.2.3, 2.2.9 ; 不匹配 2.3.0, 2.4.5
>=2.1	版本號大於或等於 2.1.0	匹配 2.1.2, 3.1
<=2.2	版本號小於或等於 2.2	匹配 1.0.0, 2.2.1, 2.2.11
1.0.0 - 2.0.0	版本號從 1.0.0 (含) 到 2.0.0 (含)	匹配 1.0.0, 1.3.4, 2.0.0

預發版：

• alpha(α)：預覽版，或者叫內部測試版；一般不向外部發布，會有很多bug；一般只有測試人員使用。
• beta(β)：測試版，或者叫公開測試版；這個階段的版本會一直加入新的功能；在alpha版之後推出。
• rc(release candidate)：最終測試版本；可能成爲最終產品的候選版本，如果未出現問題則可發佈成爲正式版本。

2.1.0-beta.1這樣聲明的版本用戶不會立馬使用，可以用來做測試使用。

六.scripts配置

在package.json中可以定義自己的腳本通過npm run來執行

"scripts": {
   "hello": "echo webyouxuan",
   "build": "webpack"
}

我們可以使用 npm run hello執行腳本，也可以使用 npm run build執行node_modules/.bin目錄下的webpack文件

• npm run 命令執行時，會把 ./node_modules/.bin/ 目錄添加到執行環境的 PATH 變量中，因此如果某個命令行包未全局安裝，而只安裝在了當前項目的 node_modules的，通過 npm run 一樣可以調用該命令。
• 執行 npm 腳本時要傳入參數，需要在命令後加 -- 標明， 如 npm run hello -- --port 3000 可以將 --port 參數傳給 hello 命令

• npm 提供了 pre 和 post 兩種鉤子機制，可以定義某個腳本前後的執行腳本，沒有定義默認會忽略

  "scripts": {
     "prehello":"echo 關注",
     "hello": "echo webyouxuan",
     "posthello":"echo 謝謝~"
  }

可以通過打印全局env和在項目下執行npm run env來對比PATH屬性，不難發現在執行npm run 的時候確實會將 ./node_modules/.bin/ 目錄添加到PATH中

七.協議

不廢話，這張圖就說明了爲什麼MIT許可是最大的了!

八.npx用法

npx命令是npm v5.2之後引入的新命令，npx可以幫我們直接執行node_modules/.bin文件夾下的文件

1.執行腳本

npx webpack

是不是省略了配置scripts腳本啦！

2.避免安裝全局模塊

全局安裝的模塊會帶來很多問題，例如：多個用戶全局安裝的模塊版本不同

npx create-react-app react-project

我們可以直接使用 npx 來執行模塊，它會先進行安裝，安裝執行後會將下載過的模塊刪除，這樣可以一直使用最新版本啦!

九.包的發佈

包的發佈比較簡單，首先我們需要切換到官方源,這裏推薦個好用的工具nrm

npm install nrm -g
nrm use npm # 切換到官方源

之後更新名字，這裏也可以發佈 作用域包 選定版本後，忽略文件夾可以使用 .npmignore，一切就緒後，發佈！！！

npm publish

ok，我們的包就可以成功的發佈到npm上啦！

十. 更多資料

參考

• 2018 年了，你還是隻會 npm install 嗎？
• npm官網
• 如何選擇開源許可證？

---