详解npx的使用教程

是什么：

是npm的自带的一个命令

出现的原因

很多人喜欢全局安装插件，比如说 react 、vue-cli 脚手架、webpack …
这样做很可能带来的一个问题，请设想： 公司需要你搭建3个项目分别用webpack 2、webpack 3、webpack 4…无论我们全局安装哪个版本，都势必给我们带来不便，那么我们的做法应该不全局安装，而是根据不同的项目安装不同版本的vue-cli脚手架

所以做法可能如下

//在当前项目
npm i webpack @4

然后运行项目

//然后执行命令（下载后的webpack在node_modules/.bin文件夹里面）
node_modules/.bin/webpack
注意：直接运行webpack是不行的，因为没有全局安装

但是…是不是感觉很麻烦呢？
所以，npx的作用就很明显了，它会默认执行node_modules/.bin，所以我们这样写

npx webpack

上面的写法还不够优雅，我们可以在package.json文件里这样写：

// 在package.json里npx可以省略不写的
script:{
	"build" : npx webpack  或 webpack  
}

作用有以下几个：

运行本地命令

使用npx 命令时，它会首先从本地工程的node_modules/.bin目录中寻找是否有对应的命令

例如：

npx webpack

上面这条命令寻找本地工程的node_modules/.bin/webpack

如果将命令配置到package.json的scripts中，可以省略npx

临时下载执行

当执行某个命令时，如果无法从本地工程中找到对应命令，则会把命令对应的包下载到一个临时目录，下载完成后执行，临时目录中的命令会在适当的时候删除

例如：

npx prettyjson 1.json

npx会下载prettyjson包到临时目录，然后运行该命令

如果命令名称和需要下载的包名不一致时，可以手动指定报名

例如@vue/cli是包名，vue是命令名，两者不一致，可以使用下面的命令

npx -p @vue/cli vue create vue-app

npm init

npm init通常用于初始化工程的package.json文件

除此之外，有时也可以充当npx的作用

npm init 包名 # 等效于 npx create-包名
npm init @命名空间 # 等效于 npx @命名空间/create
npm init @命名空间/包名 # 等效于 npx @命名空间/create-包名