介紹

工作過程中發現很多FE對于npm、npx、nvm、yarn區分了解的很少，而且對于一些命令不是很清楚作用，只知其一不知其二，本文主要帶你真正了解他們的區別和作用。

npm

無論什么知識，要想深入了解一定要去官網：npm官網

npm是一個前端包管理工具，就像java中的maven一樣，只需要簡單配置(dependencies和devDependencies)npm就會自己去下載這些包。

安裝: npm是使用node寫的，同時它也是node的包管理工具，當你安裝了node以后實際上已經安裝了npm只不過npm版本更新比node快所以如果你想更新npm的話可以通過如下命令：

npm install npm@latest -g

npm常用命令:

npm install (with no args, in package dir) npm install [<@scope>/]<name> npm install [<@scope>/]<name>@<tag> npm install [<@scope>/]<name>@<version> npm install [<@scope>/]<name>@<version range> npm install <git-host>:<git-user>/<repo-name> npm install <git repo url> npm install <tarball file> npm install <tarball url> npm install <folder>alias: npm i common options: [-P|--save-prod|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [-B|--save-bundle] [--no-save] [--dry-run]

看到上面你可能比較疑惑毫無頭緒，詳細可以看npm install，如果懶得看，我這里會講解一些常用的。

別名

npm install = npm i

npm i 是npm install 別名

安裝方式

npm install test // 根據包名安裝

npm install test@test_2020_tag // 根據包名加版本號安裝

npm install test@1.0.0 // 根據指定版本安裝

npm install test@^1.0.0 // 根據版本一定范圍安裝,^代表的意思可以自行查詢。

上面的方式是我們常用的，接下來講述一個不常用的，通過講述這個例子你要學會當一些問題沒有頭緒或者不知道怎么操作，記得一定要去官網找答案。

背景是這樣的，我們組有一個SDK包，在對接時候另外一個同事要用，但是這個SDK包又不能放在npm上，因為比較關鍵不能泄露，也不能搭建一個私有的npm服務因為領導覺得比較費時，也不能發布到自己賬號里設置成private，這樣別人安裝還要登錄我的npm賬號，最后無奈下我翻了一下官網發現可以通過npm install file的方式來安裝npm包，最后使用了這個命令解決問題。

npm install file:./test.tgz

這樣我每次把打包成一個tgz包，使用方自己就可以移動他項目里來安裝了。

安裝參數

npm install 如果什么參數也不加默認安裝在dependecies下。

-S, --save: 包將會安裝在dependecies下

-D, --save-dev: 包將會安裝在devDependencies下

-g :安裝在全局下

例子:

npm install packge --save = npm i package -S npm install packge --save-dev = npm i package -D

這里可以學習一下node的模塊管理，思考，為什么我們在全局安裝的模塊，在工程里面不安裝卻可以使用。這里實際上是node的包管理策略，它會在緩存中、node原生包、當前工程包以及全局包去有一個策略的搜索，這個不是本文重點內容，感興趣可以看一下。

npm run

npm run-script <command> [--silent] [-- <args>...]alias: npm run

npm run實際上是npm run-script別名

你不知道的npm命令

這里你可以看到很多npm你不認識的命令，如果想了解點擊上面官網。

package-lock.json

package.json里面定義的是版本范圍（比如^1.0.0），具體跑npm install的時候安的什么版本，要解析后才能決定，這里面定義的依賴關系樹，可以稱之為邏輯樹（logical tree）。node_modules文件夾下才是npm實際安裝的確定版本的東西，這里面的文件夾結構我們可以稱之為物理樹（physical tree）。安裝過程中有一些去重算法，所以你會發現邏輯樹結構和物理樹結構不完全一樣。package-lock.json可以理解成對結合了邏輯樹和物理樹的一個快照（snapshot），里面有明確的各依賴版本號，實際安裝的結構，也有邏輯樹的結構。其最大的好處就是能獲得可重復的構建（repeatable build），當你在CI（持續集成）上重復build的時候，得到的artifact是一樣的，因為依賴的版本都被鎖住了。在npm5以后，其內容和npm-shrinkwrap.json一模一樣。

npx

地址

NPM - 包管理工具，但是不能直接執行包，它更側重于管理包。
NPX - 一個執行node包的工具。

當我們安裝一個包eslint后，如果我們想單獨運行這個包并獲取版本號，使用eslint -v是不可以用的，如果你想執行可以有三種方式，一種通過全局安裝npm i eslint -g,然后eslint -v, 另外一種找到對應的bin目錄./node_modules/eslint/bin/eslint.js -v，最后一種通過package.json的script來執行。這三種要么依賴于全局要么比較繁瑣，所以這里可以看出npm確實更偏向于包的管理，而對包的執行卻沒有那么友好。

npx則可以單獨執行包，當我們安裝一個包eslint后，我們就直接可以通過npx eslint -v來執行了。當執行npx時候首先它會先看$path中有沒有，如果沒有就回去當前node_modules中查看，如果還沒有就會安裝。其實它優先類似于script標簽的另外一種表達方式，因為它的能力可以通過package.json中script來實現。

npx好處主要是避免全局安裝，例如：$ npx create-react-app my-react-app

這樣安裝后首先npx會創建下載一個臨時的create-react-app然后新建一個my-react-app后就刪除create-react-app，這樣避免安裝更多的node模塊。

nvm

官網地址

nvm實際上是node的版本管理工具，它的作用是允許你在電腦上同時安裝多個node版本，通過nvm進行切換使用。

yarn

官網地址

官網定義：

Yarn: A new package manager for JavaScript（yarn一個新的js包管理工具）

出現一個新的工具肯定要彌補舊工具的缺點:

npm缺點:
1. 下載由于是串行所以下載慢

版本不固定

"5.0.3", "~5.0.3", "^5.0.3"

這樣會導致可能官方發布了一個新版本導致兩個人安裝的時候實際上某個包的版本是不一樣的，只不過大版本一樣。

npm安裝過程中一個出錯不會終止，會一直下載，最后將所有日志輸出，導致日志雜亂。

npx很好的解決了上述問題，下載上是并行下載提高下載速度，同時通過鎖定版本可以解決版本固定問題，yarn輸出更簡潔。

其實說了這么多，這節知識點只有一個yarm比npm好用很多。

參考

https://www.zhihu.com/question/62331583https://www.npmjs.cn/https://zhuanlan.zhihu.com/p/27449990https://www.ruanyifeng.com/blog/2019/02/npx.html

注：package-lock.json那節引自知乎用戶：https://www.zhihu.com/people/coolgod 回答

總結

以上是生活随笔為你收集整理的npm run dev 后dist 被情况_npmamp;npxamp;nvmamp;yarn 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。