npx的使用与npm

What is NPM

Node Package Manager

https://www.npmjs.com/
This is the source code for the three-word thingies that randomly appear in the header of the npmjs.com website. Examples include:

• Naughty Push Message 顽皮的推送消息
• Nectar of the Programming Masses 编程群众的甘露
• Never Push to Master 永远不要往master push代码
• Never Program Mad 不要疯狂编程
• Neverending Plethora of Modules 无需过多模块
• Needless Patchouli Manufacture
• Neil Patrick’s Mansion
• Newton’s Programmatic Measurements
• Newts Parading Majestically
• Nice Poodle, Mister
• Nickel Plated Moose
• Nineties Party MixNull Pointer Missing

特点

• npm is the world’s largest Software Library (Registry)
  npm 是世界上最大的软件注册中心；注册表包含超过800000个代码包；
• 开源开发人员使用npm共享软件；
• 许多组织还使用npm管理私有开发。
• npm is also a software Package Manager and Installer
• Using npm is Free
  无需任何注册或登录即可下载所有npm公共软件包
• Command Line Client
  npm包含一个CLI，可用于下载和安装软件
  Windows示例

C:\>npm install 

Mac操作系统示例

>npm install 

安装与使用

• npm与Node.js一起安装
• 必须安装Node.js才能在计算机上安装npm
• Node Package Manager这个名字源于npm第一次被创建为Node.js的包管理器
• 所有nom包都在package.json的文件中定义
• package.json的内容必须用JSON编写
• 定义文件中必须至少存在两个字段：name和version

{
    "name" : "foo",
    "version" : "1.2.3",
    "description" : "A package for some things",
    "main" : "foo.js",
    "author" : "xiaoming",
    "licence" : "ISC"
}

• npm可以管理依赖项，依赖关系也在package.json中定义
  -如果想在npm registry中共享自己的软件，登录后可发布任何包含package.json文件的目录。

What is npx

npx: an npm package runner

• npm 从5.2版开始，增加了 npx 命令。
• npx 想要解决的主要问题，就是调用项目内部安装的模块。

npm & npx

npm 本身不运行任何包。如果要使用 npm 运行包，则必须在package.json文件中指定该包。

当通过 npm 包安装可执行文件时，npm 会创建指向它们的链接：

• 本地安装在./node_modules/.bin/目录中创建了链接
• 全局安装具有从全局bin/目录创建的链接（例如：在 Linux 上/usr/local/bin或在Windows 上%AppData%/npm）要使用 npm 执行包，您必须输入本地路径，如下所示：

$ ./node_modules/.bin/your-package

• 或者通过将其添加到package.json脚本部分的文件中来运行本地安装的软件包：

{
  "name": "your-application",
  "version": "1.0.0",
  "scripts": {
    "your-package": "your-package"
  }
}

然后通过npm run命令运行脚本：

npm run your-package

eg:

// 安装mocha包
npm install -D mocha
// npm需要去到对应的bin文件下才能执行
node-modules/.bin/mocha --version

可以看出，普通的npm运行一个包需要相当多的仪式……
Then，npx派上用场啦

// 用npx可以直接执行
npx mocha --version

由于 npm 5.2.0版npx与 npm 预先捆绑在一起。所以它现在几乎是一个标准。

npx也是一个 CLI 工具，其目的是使安装和管理 npm 注册表中托管的依赖项变得容易。

现在可以很容易地运行通常通过 npm 安装的任何类型的基于 Node.js 的可执行文件。

可以运行以下命令来查看是否已为您当前的 npm 版本安装了它：

which npx 

如果没有的话，可以通过下面命令安装

npm install -g npx

npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。

由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。

// 等同于 ls 
$ npx ls

npx使用

轻松运行本地安装的包

如果想执行一个本地安装的包，你需要做的就是输入：

$ npx your-package

npx 将检查或是否存在于$PATH，或在本地项目二进制文件中，如果存在，它将执行它。

执行以前未安装的包

另一个主要优点是能够执行以前未安装的包。
让我们通过运行来测试一下：

$ npx cowsay wow   

避免全局安装模块

npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。

$ npx create-react-app my-react-app

上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。下载全局模块时，npx 允许指定版本。

$ npx [email protected] main.js -o ./dist/main.js

上面代码指定使用 3.1.0 版本的uglify-js压缩脚本。

注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。

$ npx http-server

--no-install参数和--ignore-existing参数

如果想让 npx 强制使用本地模块，不下载远程模块，可以使用--no-install参数。如果本地不存在该模块，就会报错。

$ npx --no-install http-server

反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用–ignore-existing参数。比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。

$ npx --ignore-existing create-react-app my-react-app

使用不同版本的node

利用 npx 可以下载模块这个特点，可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的 node 模块。

$ npx [email protected] -v
v12.11.0

上面命令会使用 12.11.0 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。

某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。

-p参数

-p参数用于指定 npx 所要安装的模块，所以上面的命令可以写成下面这样。

$ npx -p [email protected] node -v 
v12.11.0

上面命令先指定安装[email protected]，然后再执行node -v命令。
-p参数对于需要安装多个模块的场景很有用。

$ npx -p lolcatjs -p cowsay [command]

-c参数

如果 npx 安装多个模块，默认情况下，所执行的命令之中，只有第一个可执行项会使用 npx 安装的模块，后面的可执行项还是会交给 Shell 解释。

$ npx -p lolcatjs -p cowsay 'cowsay hello | lolcatjs'
# 报错

上面代码中，cowsay hello | lolcatjs执行时会报错，原因是第一项cowsay由 npx 解释，而第二项命令localcatjs由 Shell 解释，但是lolcatjs并没有全局安装，所以报错。-c参数可以将所有命令都用 npx 解释。有了它，下面代码就可以正常执行了。

$ npx -p lolcatjs -p cowsay -c 'cowsay hello | lolcatjs'

-c参数的另一个作用，是将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。

$ npm run env | grep npm_

-c参数可以把这些 npm 的环境变量带入 npx 命令。

$ npx -c 'echo "$npm_package_name"'

上面代码会输出当前项目的项目名。

直接从GitHub运行代码

npx https://github.com/xiaoxiezz/npx.git

注意，远程代码必须是一个模块，即必须包含package.json和入口脚本。

测试不同的包版本

npx 使测试 Node.js 包或模块的不同版本变得非常容易。为了测试这个很棒的功能，我们将在本地安装create-react-app软件包并测试即将推出的版本。
这将在输出末尾附近列出一些 dist 标签。

Dist 标签为版本号提供别名，这使得输入变得更加容易。

$ npm v create-react-app

使用 npx 来试试next dist 标签create-react-app，它将在sandbox目录中创建应用程序。

$ npx create-react-app@next sandbox

npx 将临时安装 的下一个版本create-react-app，然后它将执行以搭建应用程序并安装其依赖项。

安装后，我们可以像这样导航到应用程序：

$ cd sandbox

然后使用以下命令启动它：

$ npm start

它将自动在您的默认浏览器窗口中打开 React 应用程序。现在我们有一个应用程序可以在下一版本的create-react-app包上运行！

总结

1. npm的m是Management，npx的x可以理解为eXecute。
2. npx 帮助我们避免版本控制、依赖问题和安装我们只想尝试的不必要的包。
3. npx还提供了一种清晰而简单的方式来执行包、命令、模块甚至 GitHub 要点和存储库。
4. npx执行逻辑
   1. 默认情况下，npx首先会去检查是否当前路径下（即在项目中）是否存在要执行的包；
   2. 若存在对应的包，则执行它；
   3. 若不存在，则认为路径下不存在该包，则npx会去安装最新版本的包，并且去执行它。
   4. 使用 npx 去执行包时，会保证使用的是最新的构建工具，无需担心包版本升级的问题

参考连接

npm与npx有什么区别？
npx的使用-动图好评
阮一峰npx 使用教程