前端寶庫

前端技術分享平台

0%

[速查表]_NPM

NPM 常用指令 速查表

簡寫

簡寫語法 說明
npm -v npm --version
-g --global,縮寫為 -g
表示安裝包時,視作 全域 的包。安裝之後的包將位於系統預設的目錄之下。
-S --save,縮寫為 -S
表示安裝的包將寫入 package.json 裡面的 dependencies
-D --save-dev,縮寫為 -D
表示安裝的包將寫入 package.json 裡面的 devDependencies
-O --save-optional,縮寫為 -O
表示安裝的包將寫入 package.json 裡面的 optionalDependencies
-E --save-exact,縮寫為 -E
表示安裝的包的版本是精確指定的。
-B --save-bundle,縮寫為 -B
表示安裝的包將寫入 package.json 裡面的 bundleDependencies
-f --force,縮寫為 -f
表示不管是否安裝過,都要強制重新安裝。
  • npm init

    初始化生成package.json

    指令 簡寫 說明
    npm init 初始化生成一個新的package.json
    npm init --yes npm init -y 跳過提問階段,直接初始化生成一個新的package.json
  • npm set

    初始化時,預設的設置,這些信息會存放在用戶主目錄的 ~/.npmrc 文件

    指令 說明
    npm set init-author-name 'Your name' 預設作者名稱
    npm set init-author-email 'Your email' 預設信箱
    npm set init-author-url 'https://arx827.github.io/' 預設主頁
    npm set init-lincense 'MIT' 預設許可證字段

    設置 package.json 儲存確切版本號

    指令 說明
    npm set save-exact true package.json將紀錄套件的確切版本,
    而不是一個可選版本的範圍
  • npm config

    設置 .npmrc 相關設定
    npmrc 有 四個相關文件

    路徑 說明
    /path/to/my/project/.npmrc 每個項目的配置文件
    $HOME/.npmrc 每個用戶的配置文件,
    可通過 CLI 選項–userconfig或環境變量配置
    $NPM_CONFIG_USERCONFIG
    $PREFIX/etc/npmrc 全域配置文件,
    可通過 CLI 選項–globalconfig或環境變量配置
    $NPM_CONFIG_GLOBALCONFIG
    /path/to/npm/npmrc npm 的內置配置文件
    指令 說明
    npm config set <key> <value> [-g|--global] <key> 設置為 <value>
    省略 <value> 時,則將其設置為 true
    npm config get <key> 顯示配置值
    npm config delete <key> 刪除配置項
    npm config list [-l] [--json] 顯示所有配置項
    npm config edit 在編輯器中打開配置文件
    npm set <key> <value> [-g|--global] <key> 設置為 <value>
    npm get <key> 顯示配置值
    npm config list -l 查看 npm 的配置。
  • npm info

    可查看每個套件的具體資訊

    指令 說明
    npm info <packageName> 查看套件資訊
    npm info <packageName> <key> 查看套件單一項資訊

    下面命令的效果一樣

    $ npm info react
    $ npm view react
    $ npm view <別名>
    $ npm show react
    $ npm v react
  • npm search 命令用於搜索npm倉庫,它後面可以跟字符串,也可以跟正規表達式。

    $ npm search <關鍵字>

    下面是一個例子

    $ npm search node-gyp
    // NAME DESCRIPTION
    // autogypi Autogypi handles dependencies for node-gyp projects.
    // grunt-node-gyp Run node-gyp commands from Grunt.
    // gyp-io Temporary solution to let node-gyp run `rebuild` under…
    // ...
  • npm list

    npm list 命令以樹形結構列出當前項目安裝的所有套件,以及它們依賴的套件。

    指令 簡寫 說明
    npm list npm ls 列出當前項目安裝的所有套件
    npm list -global npm ls -g 列出全域安裝的所有套件
    npm list <packageName> npm ls <packageName> 列出單個套件依賴關係
  • npm install

    • 基本用法

      安裝之前,npm install 會先檢查,node_modules 目錄之中是否已經存在指定套件。如果存在,就不再重新安裝。即使遠程倉庫已經有一個新版本,也是如此。
      每個套件可以『全域安裝』、『本地安裝』。

      • 『全域安裝』適用於工具模塊,e.g.: eslintgulp
      • 『本地安裝』指將一個套件下載到當前項目的 node_modules子目錄,只有在項目目錄中,才能調用這個套件。
      指令 簡寫 說明
      npm install <packageName> npm i <packageName> 本地安裝 <packageName> 套件
      npm install -global <packageName> npm i -g <packageName> 全域安裝<packageName>套件
      npm install <packageName> --force npm i <packageName> -f 強制重新安裝<packageName>套件
    • 安裝不同版本

      install命令總是安裝套件的最新版本,如果要安裝套件的特定版本,可以在套件名後面加上@和版本號。

      指令 簡寫 說明
      npm install <packageName>@latest npm i <packageName>@latest
      npm install <packageName>@0.1.1 npm i <packageName>@0.1.1
      npm install <packageName>@">=0.1.0 <0.2.0" npm i <packageName>@">=0.1.0 <0.2.0"

      如果使用 --save-exact 參數,會在package.json文件指定安裝套件的確切版本

      $ npm install readable-stream --save --save-exact

      install命令可以使用不同參數,指定所安裝的套件屬於哪一種性質的依賴關係,即出現在package.json文件的哪一項中

      指令 簡寫 說明
      npm install <packageName> --save npm i <packageName> -S 套件將被添加到 dependencies
      npm install <packageName> --save-dev npm i <packageName> -D 套件將被添加到 devDependencies

      如果要安裝beta版本的套件,需要使用下面的命令

      指令 簡寫 說明
      npm install <packageName>@beat (latest beta) npm i <packageName>@beat (latest beta) 安裝最新的beta版
      npm install <packageName>@1.3.1-beat.3 npm i <packageName>@1.3.1-beat.3 安裝指定的beta版

      npm install 默認會安裝 dependencies 字段和 devDependencies 字段中的所有套件,
      如果使用 -production 參數,可以只安裝 dependencies 字段的套件。

      $ npm install --production
      # 或者
      $ NODE_ENV=production npm install

      一旦安裝了某個套件,就可以在代碼中用 require 命令加載這個套件。

      var backbone = require('backbone')
      console.log(backbone.VERSION)
    • 避免系統權限

      默認情況下,NPM全域套件都安裝在系統目錄 (如:/usr/local/lib/),普通用戶沒有寫入權限,需要用到 sudo 命令。
      這不是很方便,可以在沒有root權限的情況下,安裝全域套件。
      首先,在主目錄下新建配置文件 .npmrc,然後在該文件中將 prefix 變數定義到主目錄下面。

      prefix = /home/yourUsername/npm

      然後在主目錄下新建 npm 子目錄。

      $ mkdir ~/npm

      此後,全域安裝的套件都會安裝在這個子目錄中,npm也會到 ~/npm/bin 目錄去尋找命令。
      最後,將這個路徑在 .bash_profile 文件 (或 .bashrc 文件) 中加入 PASH 變數。

      export PATH=~/npm/bin:$PATH
  • npm update

    更新已安裝套件
    會先到遠程倉庫查詢最新版本,然後查詢本地版本。
    如果本地版本不存在,或者遠程版本較新,就會安裝。

    指令 簡寫 說明
    npm update <packageName> 更新 <packageName> 套件

    注意,從npm v2.6.1 開始, npm update 只更新頂層套件,而不更新依賴的依賴,以前版本是遞迴更新的。
    如果想取到舊版本的效果,要使用下面的命令。

    $ npm --depth 9999 update
  • npm uninstall

    卸載已安裝套件

    指令 簡寫 說明
    npm uninstall <packageName> npm un <packageName> 卸載 <packageName> 套件
    npm uninstall <packageName> -global npm un <packageName> -g 卸載全域 <packageName> 套件
  • npm run

    package.json 文件有一個 scripts 字段,可以用於執行腳本命令,供 npm 直接調用。
    npm run 命令會自動在環境變數 $PATH 添加 node_modules/.bin 目錄,所以 scripts 字段裡面調用命令時不用加上路徑。
    npm run 會創建一個 Shell,執行指定的命令,並臨時將 node_modules/.bin 加入PATH變數,意味著本地套件可以直接運行。
    bash腳本,可直接存成 .sh 檔案,就可以在 scripts 屬性中引用該文件。 e.g.: "build-js": "bin/build.sh"

    指令 簡寫 說明
    npm run-script npm run 列出 package.json 裡所有可執行的腳本命令
    npm run-script <scriptName> npm run <scriptName> 執行 scripts<scriptName> 的腳本命令
    • 參數

      npm run 命令還可以添加參數。

      "scripts": {
      "test": "mocha test/"
      }

      代碼指定 npm test,實際運行 mocha test
      如果要通過 npm test,將參數傳入mocha,則參數前面要加上兩個連字號『 -- 』。
      下面命令表示,mocha要運行所有 test 子目錄的測試腳本,以及另外一個測試腳本anothertest.js

      $ npm run test -- anothertest.js
      # 等同於
      $ mocha test/ anothertest.js

      若參數後面不指定任何值將設置為 true

      npm run 本身有一個參數 -s,表示關閉npm本身的輸出,只輸出腳本產生的結果。

      # 輸出npm命令頭
      $ npm run test
      # 不輸出npm命令頭
      $ npm run -s test
    • scripts腳本命令最佳實踐

      scripts 字段的腳本命令,有一些最佳實踐,可以方便開發。
      首先,安裝 npm-run-all 套件。

      $ npm i -D npm-run-all

      這個套件用於運行多個 scripts 腳本命令。

      #繼發執行
      $ npm-run-all build:html build:js
      # 等同於
      $ npm run build:html && npm run build:js

      # 併發執行
      $ npm-run-all --parallel watch:html watch:js
      # 等同於
      $ npm run watch:html & npm run watch:js

      # 混合執行
      $ npm-run-all clean lint --parallel watch:html watch:js
      # 等同於
      $ npm-run-all clean lint
      $ npm-run-all --parallel watch:html watch:js

      # 通配符
      $ npm-run-all --parallel watch:*
      1. start 腳本命令

      start 腳本命令,用於啟動應用程序。
      下面命令併行執行 dev 腳本命令和 serve 腳本命令

      "start": "npm-run-all --parallel dev serve"

      等同於下面形式。

      $ npm run dev & npm run serve

      如果start腳本沒有配置,npm start 命令默認執行 node server.js
      前提是套件的根目錄存在一個server.js文件。

      $ node server.js
      1. dev 腳本命令

      dev 腳本命令,規定開發階段所要做的處理。
      下面的命令用於繼發執行所有 dev 的子命令。

      "dev": "npm-run-all dev:*"

      下面命令將sass文件編譯為css文件,並生成source map文件。

      "predev:sass": "node-sass --source-map src/css/hoodie.css.map --output-style nested src/sass/base.scss src/css/hoodie.css"

      下面命令會監視sass文件的變動,只要有變動,就自動將其編譯為css文件。

      "dev:sass": "node-sass --source-map src/css/hoodie.css.map --watch --output-style nested src/sass/base.scss src/css/hoodie.css"

      下面命令為css文件加上瀏覽器前綴,限制條件是只考慮市場使用率大於5%的瀏覽器。

      "dev:autoprefix": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" --output src/css/hoodie.css src/css/hoodie.css"
      1. serve 腳本命令

      serve 腳本命令用於啟動服務。
      下面命令啟動服務,用的是 live-server 套件,將服務啟動在9090端口,展示 dist 子目錄。

      "serve": "live-server dist/ --port=9090"

      live-server 套件有三個功能。

      • 啟動一個HTTP服務器,展示指定目錄的 index.html 文件,通過該文件加載各種網路資源,這是 file:// 協議做不到的。
      • 添加自動刷新功能。只要指定目錄之中,文件有任何變化,它就會刷新頁面。
      • npm run serve 命令執行以後,自動打開瀏覽器。

      以前,上面三個功能需要三個套件來完成: http-serverlive-reloadopener,現在只要 live-server 一個套件就夠了。

      1. test 腳本命令

      test 腳本命令用於執行測試。
      下面命令規定,執行測試時,運行 lint 腳本,檢查腳本之中的語法錯誤。

      "test": "npm-run-all test:*",
      "test:lint": "sass-lint --verbose --config .sass-lint.yml src/sass/*"
      1. prod 腳本命令

      prod 腳本命令,規定進入生產環境時需要做的處理。
      下面命令將sass文件轉為css文件,並加上瀏覽器前綴。

      "prod": "npm-run-all prod:*",
      "prod:sass": "node-sass --output-style compressed src/sass/base.scss src/css/prod/hoodie.min.css",
      "prod:autoprefix": "postcss --use autoprefixer --autoprefixer.browsers "> 5%" --output src/css/prod/hoodie.min.css src/css/prod/hoodie.min.css"
      1. help 腳本命令

      下面命令之中,markdown-chalk 套件用於將指定的markdown文件,轉為彩色文本顯示在終端之中。

      "help": "markdown-chalk --input DEVELOPMENT.md"
      1. docs 腳本命令

      docs 腳本命令用於生成文檔。
      下面命令使用 kss-node 套件,提供源碼的註釋生成markdown格式的文檔。

      "docs": "kss-node --source src/sass --homepage ../../styleguide.md"
    • pre- 和 post- 腳本

      npm run 為每條命令提供了 pre-post- 兩個鉤子(hook)。
      npm run lint 為例,執行這條命令之前,npm會先查看有沒有定義prelint和postlint兩個鉤子,
      如果有的話,就會先執行 npm run prelint,然後執行 npm run lint,最後執行 npm run postlint
      下面代碼是一個 package.json 文件的例子。

      {
      "name": "myproject",
      "devDependencies": {
      "eslint": "latest"
      "karma": "latest"
      },
      "scripts": {
      "lint": "eslint --cache --ext .js --ext .jsx src",
      "test": "karma start --log-leve=error karma.config.js --single-run=true",
      "pretest": "npm run lint",
      "posttest": "echo 'Finished running tests'"
      }
      }

      如果執行過程出錯,就不會執行排在後面的腳本,即如果prelint腳本執行錯誤,就不會接著執行lint和postlint腳本。

      如果執行 npm test,會按下面的順序執行相應的命令。

      1. pretest
      2. test
      3. posttest
      {
      "test": "karma start",
      "test:lint": "eslint . --ext .js --ext .jsx",
      "pretest": "npm run test:lint"
      }

      下面是一些常見的 pre-post- 腳本。

      腳本 說明
      prepublish 發佈一個套件前執行。
      postpublish 發佈一個套件後執行。
      preinstall 執行 npm install 命令前執行。
      postinstall 執行 npm install 命令後執行。
      preuninstall 卸載一個套件前執行。
      postuninstall 卸載一個套件後執行。
      preversion 更改套件版本前執行。
      postversion 更改套件版本後執行。
      pretest 運行 npm run test 命令前執行。
      posttest 運行 npm run test 命令後執行。
      prestop 運行 npm run stop 命令前執行。
      poststop 運行 npm run stop 命令後執行。
      prestart 運行 npm run start 命令前執行。
      poststart 運行 npm run start 命令後執行。
      prerestart 運行 npm run restart 命令前執行。
      postrestart 運行 npm run restart 命令後執行。

      對於 npm run restart命令,如果沒有設置 restart 腳本,prerestartpostrestart 會依次執行stop和start腳本。

      也支持Git相關的鉤子。下面以 husky 套件為例。

      $ npm i husky -D

      安裝以後,就能在 package.json 添加 precommitprepush 等鉤子。

      {
      "scripts": {
      "lint": "eslint yourJsFiles.js",
      "precommit": "npm run test && npm run lint",
      "prepush": "npm run test && npm run lint",
      "...": "..."
      }
      }

      類似作用的套件還有 pre-commitprecommit-hook 等。

    • 內部變數

      scripts字段可以使用一些內部變數,主要是package.json的各種字段。
      不區分大小寫,Node會優先選擇小寫版本。
      在npm-scripts內部,npm將設置自己的環境變數。
      例如:package.json的內容是 {"name":"foo", "version":"1.2.5"}
      那麼變數 npm_package_name 的值是foo,變數 npm_package_version 的值是1.2.5。

      {
      "scripts":{
      "bundle": "mkdir -p build/$npm_package_version/"
      }
      }

      運行 npm run bundle 以後,將會生成 build/1.2.5/ 子目錄。

      config 字段也可以用於設置內部字段。
      下面代碼中,變數 npm_package_config_reporter 對應的就是reporter。

      {
      "name": "fooproject",
      "config": {
      "reporter": "xunit"
      },
      "scripts": {
      "test": "mocha test/ --reporter $npm_package_config_reporter"
      }
      }
    • 通配符

      npm的通配符的規則如下:

      通配符 說明
      * 匹配0個或多個字符。
      ? 匹配1個字符。
      [...] 匹配某個範圍的字符。如果該範圍的第一個字符是 !^,則匹配不在該範圍的字符。
      !(pattern|pattern|pattern) 匹配任何不符合給定的模式。
      ?(pattern|pattern|pattern) 匹配0個或1個給定的模式。
      +(pattern|pattern|pattern) 匹配1個或多個給定的模式。
      *(a|b|c) 匹配0個或多個給定的模式。
      @(pattern|pat*|pat?erN) 只匹配給定模式之一。
      ** 如果出現在路徑部分,表示0個或多個子目錄。
  • 開發NPM套件的時候,有時會希望,邊開發邊試用,比如本地調適的時候, require('packageName') 會自動加載本地開發中的套件。
    Node規定,使用一個套件時,需要將其安裝到全域的或項目的 node_modules 目錄之中。
    對於開發中的套件,解決方法就是在全域的 node_modules 目錄之中,生成一個符號連結,指向套件的本地目錄。
    npm link 能自動建立這個符號連結。
    假設,開發一個套件 myModule,目錄為 src/myModule
    開發項目為 myProject 要用到這個套件,項目目錄為 src/myProject

    思路:

    • 先在全域套件目錄中,新增一個文件指向開發中的套件。
      /path/to/global/node_modules/myModule -> src/myModule
    • 將開發項目要用到的套件,指向全域套件目錄
      src/myProject/node_modules/myModule -> /path/to/global/node_modules/myModule
    • 就可在開發項目中,加載該套件了
      var myModule = require('myModule');
    • 這樣一來,myModule的任何變化,都可以直接反映在 myProject 項目之中,但是相對的在 myProject 目錄中對 myModule 的修改,也會反映到套件的源碼中。
    • 若不再需要該套件時,可以在項目目錄中執行 npm unlink,刪除符號連結。
    指令 說明
    npm link 在套件目錄 src/myModule執行命令,會在NPM的全域套件目錄內,
    生成一個符號連結文件,該文件的名稱就是 package.json 文件中指定的套件名。
    npm link myModule 在項目目錄 src/myProject執行命令,並指定套件名,
    就可以全域調用 myModule 套件了。
    npm unlink 在項目目錄 src/myProject執行命令,刪除符號連結。
  • npm bin

    指令 說明
    npm bin 顯示相對於當前目錄的,Node套件的可執行腳本所在目錄 (即 .bin 目錄)。
  • npm adduser

    指令 說明
    npm adduser npmjs.com 申請用戶名。
    npm login 已經註冊過,就可以此命令登錄。
  • npm publish

    用於將當前套件發佈到 npmjs.com
    執行 npm publish 之前,需先執行 npm addusernpmjs.com 申請用戶名,
    並執行 npm login 登錄。

    指令 說明
    npm publish 登錄後,就可以使用 npm publish 命令發佈。
    npm publish --tag beta 如果當前套件是一個beta版,發佈的時候需要使用 tag 參數,
    將其發佈到指定標籤,默認發佈標籤是 latest
  • npm deprecate

    如果想廢棄某個版本的套件,可以使用 npm deprecate 命令。

    指令 說明
    npm deprecate <packageName>@"<0.2.3" "critical bug fixed in v0.2.3" 小於 0.2.3 版本的套件的 package.json ,都會在命令行顯示警告。
  • npm owner

    套件的維護者可以發佈新版本。 npm owner 用於管理套件的維護者。

    指令 說明
    npm owner ls <packageName> 列出指定套件的維護者。
    npm owner add <user> <packageName> 新增維護者。
    npm owner rm <user> <packageName> 刪除維護者。
  • 其他命令

    • npm home 、 npm repo

    指令 說明
    npm home <packageName> 打開一個套件的主頁。
    npm repo <packageName> 打開一個套件的代碼倉庫。
    • npm outdated

      會列出:

      • 當前版本 (current version)
      • 應當安裝的版本 (wanted version)
      • 最新發佈的版本 (latest version)
      指令 說明
      npm outdated 檢查當前項目所依賴的套件,是否已經有新版本。
    • npm prune

      指令 說明
      npm prune 檢查node_modules,是否有package.json裡面沒有提到的套件,輸出在命令行中。
    • npm shrinkwrap

      運行該命令後,會在當前項目的根目錄下生成一個 npm-shrinkwrap.json 文件,內容是 node_modules 目錄下所有已經安裝的套件,以及它們的精確版本。
      下次運行 npm install 命令時,npm 發現當前目錄下有 npm-shrinkwrap.json 文件,就會只安裝裡面提到的模塊,且版本也會保持一致。

      指令 說明
      npm shrinkwrap 鎖定當前項目的依賴套件的版本。