Node.js,如今已经是前端开发不可或缺的组成部分;npm 则是 Node.js 默认的、以 JavaScript 编写的软件包管理系统; 而 npx 是 npm 软件包运行器,使用它,能够无需显式安装即可帮助执行 npm 软件包。它有很多用处,本就从其主要使用场景角度,来介绍下该命令。

前端利器之 npx 使用纪要

『有则推荐』: 自 2017 年初,就有开始利用闲余时光,打磨个人最新作品——「倾城之链」 ,有意将其打造成优良开放型平台,旨在云集全球优秀网站,让您更为便捷地探索互联网中那更广阔的世界;在这里,您可以轻松发现学习分享更多有用有趣的事物。目前仍在不断迭代、优化中,如果您对此感兴趣,不妨先尝试一下: 「倾城之链」;亦十分欢迎提出您宝贵意见或建议(亦可通过微信扫,描如下小程序码进行体验)。 (Upade@2020-05-01 于深圳.南山)。

小程序码 - 倾城之链

安装

更新 npm 至 >= @5.2.0,就会自动安装 npx;可以通过 which npx 来查看其绝对路径 ;如果由于某种原因它不可用,请按照以下说明安装或更新它即可:

1
npm install -g npx

存在价值

多年来,npm 生态系统越来越倾向于将工具安装为项目本地 devDependencies,而不是要求用户在全局范围内安装它们。这意味着像 mochagulpbower 这样曾经主要全局安装在系统上的工具现在可以在每个项目的基础上管理它们的版本。这也意味着,要使基于 npm 的项目启动并运行,你需要做的就是确保在系统上有 node+npm,克隆 Git repo,然后执行 npm installnpm run xx 来安装依赖以及运行命令。由于npm run-script 将本地二进制文件添加到路径,这样就可以了!

缺点是,这使你无法以交互方式快速、方便地调用本地二进制文件。有几种方法可以做到这一点,他们都对他们有一些烦恼:你可以将这些工具添加到你的 scripts,但是你需要记住通过使用 -- 来传递参数,你可以做使用 shell 脚本技巧 alias npmx=PATH=$(npm bin):$PATH,或者你可以使用 ./node_modules/.bin/rollup 手动路径到它们。这些都有效,但没有一个是理想的,参见如下使用命令:

1
2
3
4
5
6
npm i -D rollup
./node_modules/.bin/rollup -v
#or
npm i -D rollup
`npm bin`/rollup -v

npx 为你提供了更好的解决方案:npx rollup 是你使用本地安装所需的全部工作;如果你采取额外的步骤并配置 shell 自动回退

好处是,如果调用已经安装的二进制文件,npx 基本上没有开销(Npx Official Description: Executes \<command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for \<command> to run.) – 它足够聪明,可以将工具的代码,直接加载到当前运行的node 进程中!这与此类事情的速度差不多,并使其成为完全可以接受的脚本编写工具。

应用场景

运行项目安装的模块

npx 想要解决的主要问题,就是调用项目内部安装的模块。比如,项目内部安装了打包工具 rollup。调用 rollup ,可在项目脚本和 package.json 的 scripts 字段里面;如果想在命令行下调用,像下面 👇 这样使用,会更加方便。

1
npx rollup -v

npx 的原理很简单,就是运行的时候,会到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在。由于 npx 会检查环境变量$PATH,所以系统命令也可以调用。

1
2
npx ls # 等价于 npx ls
npx which npm # 等价于 which npm

一次性调用,无需本地安装

1
2
3
4
# 开启一个本地静态服务器
npx arya-jarvis s
# or
npx http-server

执行 GitHub 上面的模块源码

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

1
2
3
4
5
# 从 gist 服务上调用命令
npx https://gist.github.com/nicejade/406f154e882a836de1b2e12d02b84aab
# 从 github 仓库中调用命令
npx github:piuccio/cowsay hello

值得一提的是,上述 gist 代码片段,是为写此篇文章,特意写来测试用(使用 npx 命令来快速生成一个标准的 README.md);有了 npx 这个功能,即可为朋友们分享一些脚本,提供更加便捷 & 快捷的方式(相比之下,npm 仓库的脚本,发布和使用,都显得更加繁琐些;当然,你需要注意 ⚠️ 安全,请务必仔细阅读 gists 代码,如同运行.sh 脚本时一样!)。

指定不同版本的 node 运行 npm 脚本

1
2
3
4
npx node@12.9.1 npm -v
npx -p node@12.9.1 npm -v
npx -p node@12.9.1 npm run build
npx -p node@12.9.1 yarn build

上面命令会使用 12.9.1 版本的 Node 执行脚本;原理是从 npm 下载这个版本的 node,使用后再删掉;在一些特殊场景,用来此法来切换 Node 版本(如测试该版本是否支持某特性等),要比一些版本管理器(如 nvm)来的方便一些。

-p 参数

-p参数用于指定 npx 所要安装的模块,这对于需要安装多个模块的场景很有用,比如:

1
npx -p cowsay -p arya-jarvis [command]

-c 参数

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

1
2
# 将会报错
npx -p cowsay -p arya-jarvis "arya ip | cowsay"
  1. npx -c参数,可以将所有命令都用 npx 来解释。于是,下面代码就可以正常工作:
1
2
3
4
5
6
7
8
9
10
11
# npx -p cowsay -c "cowsay hey, bro"
npx -p cowsay -p arya-jarvis -c "arya ip | cowsay"
...
______________
< 172.13.14.21 >
--------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
  1. -c 参数的另一个作用是,可以把这些 npm 的环境变量带入 npx 命令,如下代码:
1
2
npx -c 'echo "$npm_package_name"'
npx -c 'echo "$npm_package_version"'

使用 --inspect 运行节点二进制文件

1
2
npx --node-arg=--inspect cowsay
Debugger listening on ws://127.0.0.1:9229/....

此外,npx 还有 shell 自动回退(shell auto-fallback)功能,可以使用与 bashzshfish 等;倘若把 npx 配置在 .zshrc 文件中,当在本地找不见伴随 @ 命令时,可以在不引用 npx 的情况下,用其作为后备命令执行,配置也很简单,如果你是用的是 zsh,执行如下命令即可(如果是 bash Or fish,可以参见 npx - shell auto-fallback):

1
source <(npx --shell-auto-fallback zsh)

具体使用效果如下示例:

1
2
3
4
5
ember-cli@latest --version
找不到 ember-cli@latest,请尝试使用 npx...
ember-cli: 3.14.0
node: 12.13.0
os: darwin x64

原文首发出处: 静轩之别苑
原文首发链接:前端利器之 npx 使用纪要

于 2019.12.10 于深圳.福田 last modify: 2019.12.11.

参考文献链接

您可能感兴趣的文章


静晴轩 ~ 晚晴幽草轩
个人微信公众号晚晴幽草轩;名字取自:“天意怜幽草,人间重晚晴”。
专注互联网开发(Web 大前端、快应用、小程序),以及分享优质网站、AI 应用、效率工具、心得感悟等内容。

文章目录
  1. 1. 安装
  2. 2. 存在价值
  3. 3. 应用场景
    1. 3.1. 运行项目安装的模块
    2. 3.2. 一次性调用,无需本地安装
    3. 3.3. 执行 GitHub 上面的模块源码
    4. 3.4. 指定不同版本的 node 运行 npm 脚本
      1. 3.4.1. -p 参数
      2. 3.4.2. -c 参数
    5. 3.5. 使用 --inspect 运行节点二进制文件
    6. 3.6. 参考文献链接
    7. 3.7. 您可能感兴趣的文章