npm script 的基礎總結

demo 代碼地址

1. npm 命令詳解

博客園 白樹 npm 命令詳解

阮一峯npm模塊管理

須要說明：npm link 在使用 ui 組件庫的腳手架 和 業務組件庫腳手架，若是二者的腳手架的配置不一致，建議不能使用 npm link，多半會配置衝突，必須上傳 npm 庫使用。

1.1 package.json 配像說明

這裏提供阮一峯package.json講解，當講解得不夠完整，下面補充。

• typing，這裏能夠參考 nutui 使用方式

2. npm 源的問題

這部分其實npm config 命令知識點，由於過重要了。經常由於源的問題，致使安裝包出現奇葩問題（別問我怎麼知道的），如：安裝的包不兼容，致使本地沒法開發；測試環境包正常，發佈到生產，包就出現問題，形成生產問題。

2.1 cnpm(不推薦)

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

2.2 手動設置源

若是公司配有專門 npm 源，在自動發佈時會設置公司內部源。

npm config set registry https://registry.npm.taobao.org
複製代碼

2.3 發佈 npm 包，要指定源

發佈 npm 包，執行 npm login 登錄不上，首先須要檢查本身 npm 源對不？不對，則須要切換。

npm config set registry https://registry.npmjs.org/
複製代碼

2.4 安裝的時候切換源

npm install -g @vue/cli --registry=https://registry.npm.taobao.org
複製代碼

2.5 nrm 自由切換

nrm 詳細地址

3. nvm 切換 node 版本

window 安裝nvm

mac oh-my-z 安裝

要注意的是 mac 和 linux 下 nvm use 只是臨時切換node 版本，要永久的切換示例如：nvm alias default 8.11.3。

4. npm 包發佈流程

代碼地址

經過npm寫一個cli命令行工具來了解，具體步驟以下：

步驟1. 項目初始化 和 cli 的業務邏輯

#! /usr/bin/env node 必定要聲明，表示程序是nodejs執行的

#! /usr/bin/env node

console.log('hello world');
複製代碼

步驟2. bin/cli 引入執行程序文件

|__bin
   |__ say.js
複製代碼

say.js 內容

require('../index.js')
複製代碼

步驟3. package.json

"main": "./src/index.js",
"bin": {
  "mkcli": "bin/say"
},
複製代碼

步驟4. 登陸和發佈

在登陸前，先保證npm源是npm網站的（發佈完了，再改回淘寶源）

npm config set registry https://registry.npmjs.org/
複製代碼

登陸發佈

npm login
npm publish
複製代碼

問題： 製做npm的cli，下載安裝，執行命令，提示不是內部命令?

執行文件裏面沒有聲明：#!/usr/bin/env node

5. npm 多命令執行

• & 表示併發執行
• && 表示串行執行

須要注意，使用 & 和 && 執行會致使命令很長。這裏咱們可使用 npm-run-all 簡化命令。示例以下

未簡化前

npm run cli1 &&  npm run cli2 && npm run cli3
複製代碼

簡化後

npm-run-all cli1 cli2 cli3
複製代碼

固然了，這裏能夠經過 nodejs 或者 scripty + shell 能夠實現精簡代碼。

6. npm run cli 的參數問題

代碼地址

錯誤代碼示例：

{
  "lint:js": "eslint *.js",
  "lint:js:fix": "eslint *.js --fix"
}
複製代碼

正確代碼示例：

{
  "lint:js": "eslint *.js",
  "lint:js:fix": "npm run lint:js -- --fix"
}
複製代碼

npm run lint:js --fix 不會修復不符合規範js，必須是 npm run lint:js -- --fix。 -- --fix 是 npm run lint:js:fix 命令傳遞的額外參數。

另外也有 npm 包專門獲取參數，如：minimist

7. npm script 日誌狀況

• npm test -s 或 npm test --loglevel silent命令執行， 輸出日誌模式爲簡潔。
• npm test -d 或者 npm test --loglevel verbose 或者 npm test --verbos 命令執行，輸出日誌模式爲詳細，在排查錯誤信息是很是有用的。

8. npm script 的鉤子

代碼地址

這個用處不大，可是要了解，仍是那句話，知道它沒有用，就是最大用處。

示例：

{
  // ...
  "scripts": {
    "predemo": "echo predemo",
    "demo": "echo demo",
    "postDemo": "echo postDemo"
  }
  // ...
}
複製代碼

執行 npm run demo，就至關於執行 npm run predemo && npm run demo && npm run postDemo。

這樣會形成命令的冗餘，意義不大。

9. npm 的環境變量

執行 npm run env（npm 提供的）會打印出，預約義變量，一般兩種：

• npm_config_ 爲前綴的。
• npm_package_ 爲前綴的。

npm_config_ 爲前綴的變量是全局性的，通常不多設置，設置是經過 npm config set命令的。目前，來講可以用到就是設置 npm 下載的源。

npm_package 爲前綴的變量是當前 package.json 的值，能夠一一對應。

這裏以 npm_package 作一個示例：

{
  // ...
  "name": "yourname",
  "script": {
    "sayName": "echo $npm_package_name"
  }
  // ...
}
複製代碼

運行 npm run sayName，命令窗口會打印出 yourname。

10. 平臺的兼容問題

10.1 文件操做命令問題

rm、cp、mkdir 這些命令在 window 的 cmd 是不支持，直接用 cmder 或 git bash等工具來解決，也能夠下載對應的npm包來解決。

10.2 用 cross-var 引用變量

linux 的變量引用方式是 $npm_package_name, window 則是 %npm_package_json%，可使用 cross-var 來解決。

ps: cross-var 自帶 babel, 若是要輕量話，建議用 cross-var-no-babel。

示例

{
  "scripts": {
    "demo": "cross-var echo $npm_package_name"
  }
}
複製代碼

10.3 用 cross-env 設置環境變量

linux 和 Windows 配置環境方式不一樣，爲了兼容，能夠用 cross-env。先了解一下 linux 和 windows 配置環境的方式吧。

Windows 臨時配置

#node中經常使用的到的環境變量是NODE_ENV，首先查看是否存在 
set NODE_ENV 
#若是不存在則添加環境變量 
set NODE_ENV=production 
#環境變量追加值 set 變量名=%變量名%;變量內容 
set path=%path%;C:\web;C:\Tools 
#某些時候須要刪除環境變量 
set NODE_ENV=
複製代碼

linux 臨時配置

#node中經常使用的到的環境變量是NODE_ENV，首先查看是否存在
echo $NODE_ENV
#若是不存在則添加環境變量
export NODE_ENV=production
#環境變量追加值
export path=$path:/home/download:/usr/local/
#某些時候須要刪除環境變量
unset NODE_ENV
#某些時候須要顯示全部的環境變量
env
複製代碼

使用 cross-env 解決的示例：

{
// ...
  "scripts": {
    "demo2": "cross-var echo $npm_package_name",
    "demo1": "cross-env NODE_ENV=test node src/index.js"
  }
// ...
}
複製代碼

11. scripty、shelljs、child_procss.exec 三者使用狀況

這個三個使用的api，在使用查詢，我要知道他們有些區別。

• scripty + shell 腳本把命令拆分，學習成本大，有平臺兼容問題
• 用 shelljs + nodejs 可寫些複雜，學習成本不大，平臺兼容問題少
• shelljs 是基於 child_procss 模塊封裝，有時不需它封裝的多餘功能，咱們可使用 nodejs 自帶 child_process 模塊

待續