介紹

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

npm

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

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

安裝: npm是使用node寫的，同時它也是node的包管理工具，當(dāng)你安裝了node以后實際上已經(jīng)安裝了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]

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

別名

npm install = npm i

npm i 是npm install 別名

安裝方式

npm install test // 根據(jù)包名安裝

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

npm install test@1.0.0 // 根據(jù)指定版本安裝

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

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

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

npm install file:./test.tgz

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

安裝參數(shù)

npm install 如果什么參數(shù)也不加默認(rèn)安裝在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

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

npm run

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

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

你不知道的npm命令

這里你可以看到很多npm你不認(rèn)識的命令，如果想了解點擊上面官網(wǎng)。

package-lock.json

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

npx

地址

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

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

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

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

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

nvm

官網(wǎng)地址

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

yarn

官網(wǎng)地址

官網(wǎng)定義：

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

出現(xiàn)一個新的工具肯定要彌補舊工具的缺點:

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

版本不固定

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

這樣會導(dǎo)致可能官方發(fā)布了一個新版本導(dǎo)致兩個人安裝的時候?qū)嶋H上某個包的版本是不一樣的，只不過大版本一樣。

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

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

其實說了這么多，這節(jié)知識點只有一個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那節(jié)引自知乎用戶：https://www.zhihu.com/people/coolgod 回答

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。