npm命令及npm scripts的簡單總結

npm使用方法和命令

官網,文檔html


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>node

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

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文件web

縮寫選項:shell

Shorthands and Other CLI Nicetiesnpm

The following shorthands are parsed on the command-line:json

-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 --longgulp


npm scripts

參考多個網絡資源:bash

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構建項目

使用npm scripts 和 webpack 構建項目
2個連接:

相關文章
相關標籤/搜索