npm命令及npm scripts的簡單總結

npm使用方法和命令

官網,文檔

---

npm config list/ls 顯示配置信息
npm config list/ls -l 更詳細
npm -h 顯示幫助信息，建議多查看
npm -l display full usage info ;-l is --long
npm <cmd> -h 顯示某個命令的幫助信息
npm help npm
npm help <term>

npm config set prefix path 修改npm全局安裝目錄
npm config set cache path 修改npm cache目錄
把新的npm路徑修改到系統環境變量中，才可生效
npm config set registry='https://registry.npm.taobao.org/' 設置npm資源鏡像，加快下載安裝速度，還有其他鏡像

npm ls 顯示工程目錄下本地安裝的包，--depth=0,顯示初級依賴層次
npm -g ls 顯示全局安裝的包
npm i/install --save xxx 安裝包信息將加入到dependencies（生產階段的依賴）
npm i/install --save-dev xxx 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它
npm i --save-exact xxx 精確安裝包版本，package.json里的依賴包的value是具體的版本號，前邊沒有符號
npm root 查看包的安裝路徑,及node_modules的路徑
npm view modulename 查看模塊的package.json信息
npm view moudleName dependencies 查看包的依賴關系
npm view moduleName repository.url 查看包的源文件地址
npm view moduleName engines 查看包所依賴的node版本
npm outdated 檢測顯示過時的包
npm update 更新包
npm uninstall 卸載包
npm init 在項目中引導創建一個package.json文件

縮寫選項：

Shorthands and Other CLI Niceties

The following shorthands are parsed on the command-line:

-v: --version
-h, -?, --help, -H: --usage
-s, --silent: --loglevel silent
-q, --quiet: --loglevel warn
-d: --loglevel info
-dd, --verbose: --loglevel verbose
-ddd: --loglevel silly
-g: --global
-C: --prefix
-l: --long
-m: --message
-p, --porcelain: --parseable
-reg: --registry
-f: --force
-desc: --description
-S: --save
-D: --save-dev
-O: --save-optional
-B: --save-bundle
-E: --save-exact
-y: --yes
-n: --yes false
ll and la commands: ls --long

---

npm scripts

參考多個網絡資源：

• http://www.xiaocaoge.com/build-with-npm-scripts.html?utm_source=tuicool&utm_medium=referral
• http://www.open-open.com/lib/view/open1487819024678.html
• http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

npm scripts 是指npm對於package.json文件中"scripts"屬性的處理，通過該屬性，npm 可以執行命令。

使用不帶參數的npm run,顯示package.json里所有的script腳本命令及內容。

npm run 會創建一個新的shell，執行指定的命令，並將node_modules/.bin 加入 PATH 變量。當腳本內容結束，則子 shell 關閉，回到父 shell 中。

由於 npm 腳本的唯一要求就是可以在 Shell 執行，因此它不一定是 Node 腳本，任何可執行文件都可以寫在里面。
npm 腳本的退出碼，也遵守 Shell 腳本規則。如果退出碼不是0，npm 就認為這個腳本執行失敗。

向npm run xx傳入參數必須用--表明

執行順序：
$npm run xx & npm run xxx同時並行執行
$npm run xx && npm run xxx 前一個執行成功，再執行最后一個

---

例如：

{
    "scripts": {
        "lint": "eslint"
    }
}

目錄終端中，執行npm run-script lint啟動lint命令,也可簡化為npm run lint；實際是執行了node_modules/.bin/eslint。
項目目錄下的node_modules/.bin/目錄專門存放安裝包的可執行程序。

內置的幾個npm 命令

• start: 執行 npm start
• test: 執行 npm test
• stop: 執行 npm stop
• restart: 執行 npm restart。npm restart是一個復合命令，實際上會依次執行三個腳本命令：stop、restart、start。prerestart>prestop>stop>poststop>restart>prestart>start>poststart>postrestart

---

pre 和 post hooks

雙重的pre和post無效，比如prepretest和postposttest是無效的。

{
    "scripts":{
        'prexxx':,
        'xxx':,
        'postxxx':,
    }
}

執行npm run xxx后，默認執行順序：npm run prexxx > npm run xxx > npm run postxxx
一些內置的命令如：start ,執行npm start，會默認執行： npm run prestart > npm run start > npm run poststart。詳見官網

---

{
    "scripts":{
        "build:dev":"xxxx",//npm run build:dev
        "build:prod":"xxx"//npm run build:prod
    }
}

---

環境變量

通過npm_package_前綴，npm 腳本可以拿到package.json里面的字段
若package.json中有{"version":xxx,"name":xx},則npm 在scripts中添加環境變量： npm_package_name 和 npm_package_version。
在*.js文件中可以使用process.env.npm_package_xxx引入
還可自定義變量：
config 字段也可以用於設置內部字段

{
    "config": {
        "port": 1111
    }
    //則scripts中可以引入
    "scripts":{//bash腳本
        "xxx":"xxx ${npm_package_config_port}/$npm_package_config_port"
    }
}

npm_lifecycle_event

npm 正在執行哪個script,npm_lifecycle_event就返回當前正在運行的腳本名稱。

---

為什么使用 npm Scripts 構建項目

參考鏈接，這里摘抄幾點：

Gulp 與 Grunt 的不足

總得來說就是 Gulp 與 Grunt 引入了一層復雜但是多余的抽象層，用來抽象直接的構建命令，比如gulp-uglify和grunt-contrib-uglify用來包裝uglifyjs命令。這層抽象所建立的插件生態帶來了很多問題：

額外的抽象，帶來了額外的學習成本；
插件依賴作者，無論是插件質量、設計合理性、文檔、更新及時性等嚴重依賴作者自身的水平與投入；
為什么 npm scripts 先前使用的人不多？這可能是因為很多人存在對 npm scripts 的誤解：
人們認為 npm scripts 需要熟悉命令行技能；
人們認為 npm scripts 不夠強大；
人們認為 Gulp 的流（stream）對於快速構建是必須的；
人們認為 npm scripts 不能跨平台；

而真相是：

npm scripts 並不需要熟悉命令行技能，當然熟悉的話更好；
npm scripts 可以完成絕大多數 Grunt 與 Gulp 完成的任務，實在不行還可以寫 NodeJS 代碼來完成；
因為 npm scripts 在一個 Shell 環境中執行的，而 Shell 天生支持流；
幾個常見的命令操作符&&/</>/|是跨平台的，對於一些 Linux/Mac 中的 Shell 命令可以使用 shelljs 來實現跨平台；
而 npm scripts 的不足是由於package.json文件不可以寫注釋，對於復雜的構建任務，代碼可讀性很差。這個可以盡量通過貼切的命名，任務細分來減輕。另外就是需要熟悉各構建工具的命令行使用方式。

---

使用npm scripts構建項目

• http://www.open-open.com/lib/view/open1487819024678.html
• http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

使用npm scripts 和 webpack 構建項目
2個鏈接：

• http://www.open-open.com/lib/view/open1489029618781.html
• http://www.cnblogs.com/geoffgu/p/6016915.html