你真的会用 npx 吗❓❓❓
Hello,大家好!
日常开发中大家应该经常使用 npm install xxx 来安装包依赖,那是否注意到npm升级到 npm@5.2.0 之后,在 npm 二进制命令旁边安装了一个 npx 二进制文件呢?
没有 npx 命令前
在没有 npx 命令之前,我们想要执行项目中安装的可执行脚本,以安装 React 创建项目的脚手架 create-react-app 为例,通常使用下面的做法:
做法一,使用全局安装然后再创建项目:
npm install create-react-app -g
create-react-app test-react
缺点
create-react-app安装项目本身是一个低频次操作,全局安装不具备必要性,同时如果其它低频次工具也全局安装,势必会造成全局 path 混乱和冗余。- npm 生态系统越来越倾向于将工具安装为项目本地
devDependencies,让每个项目独立管理工具的版本,而不是都是用全局安装的固定版本。
做法二,不全局安装,需要先进入脚手架目录,再调用这个命令:
npm install create-react-app -D
cd node-modules/.bin/
create-react-app test-react
或者将 create-react-app 命令添加到 package.json 的 scripts中
缺点
这样做每个项目可以安装不同的脚手架版本,但操作还是略微繁琐,同时每个项目都安装一遍脚手架工具也是不必要的。
npx 就是为了解决这些问题,下面我们来了解一下。
npx 基本用法
了解基本用法之前,我们先看看 npx 的安装。
安装
在安装完 node 以及 npm 后,会默认安装 npm 相同版本号的 npx 工具,当然也可以独立安装:
npm install -g npx
执行命令
npx create-react-app
使用 npx 执行一个工具非常简单,不需要提前安装 create-react-app ,直接使用 npx 就可以执行这个工具,这源于 npx 的查找流程:
- 先自动查找当前项目依赖包中的可执行文件,也就是
node-modules/.bin/; - 如果找不到,就会去全局
$PATH中查找,所以全局安装的包不会重复安装; - 如果依然找不到,就会帮你临时安装,执行完命令后再删除包。
拥有 npx 后,当我们开发一个命令,就不用让用户先安装再使用了,给用户添加负担。
常用参数
同时,npx 还有一些常用的参数:
--no-install 和--ignore-existing 参数
如果想让 npx 强制使用本地模块,不下载远程模块,可以使用--no-install参数。如果本地不存在该模块,就会报错。
npx --no-install create-react-app
反过来,如果忽略本地的同名模块,强制安装使用远程模块,可以使用--ignore-existing参数。比如,本地已经全局安装了create-react-app,但还是想使用远程模块,就用这个参数。
npx --ignore-existing create-react-app my-react-app
-p 参数
-p参数用于指定 npx 所要安装的模块版本。
npx -p node@18.16.1 node -v
上面命令先指定安装node@18.16.1,然后再执行node -v命令。
-p参数对于需要安装多个模块的场景很有用。
npx -p lolcatjs -p cowsay 'cowsay hello'
cowsay 工具会在命令行中生成羊图案和对象的文字,lolcatjs 工具会将这只羊上色
-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_ # 查询npm的环境变量,并筛选出以 npm_ 开头的变量
-c参数可以把这些 npm 的环境变量带入 npx 命令。
npx -c 'echo "$npm_package_name"'
上面代码会输出当前项目的项目名。
npx 其它用法
使用不同版本的 node
利用 npx 可以下载模块这个特点,可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的 node 模块。
npx node@18.16.1 -v
上面命令会使用 18.16.1 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node,使用后再删掉。
使用这个包,可以直接在一个 node 环境下,使用不同版本的 node 测试开发的包是否正常运行,当然也可以使用 nvm 等 node 管理器,但是需要先切换再测试的方式效率明显不如上面的命令。
执行 GitHub 源码
npx 还可以执行 GitHub 上面的模块源码。
npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
# 执行仓库代码
npx github:piuccio/cowsay hello
注意,远程代码必须是一个模块,即必须包含package.json和入口脚本。
本文具体参考了以下文章:
- Introducing npx: an npm package runner | by Kat Marchán | Medium
- GitHub - npm/npx: npm package executor
- npx 使用教程 - 阮一峰的网络日志
你真的会用 npx 吗❓❓❓的更多相关文章
- npx命令介绍
什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If you do not have a package.json, create one before installing ...
- npx命令
npx命令 查了一下, 英文资料: https://www.npmjs.com/package/npx 中文资料: 什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If yo ...
- App你真的需要么
随着智能手机.移动路联网的普及,APP火的一塌糊涂,APP应用可谓五花八门,街上经常看到各种推广:扫码安装送东西,送优惠券.仿佛一夜之间一个企业没有自己的APP就跟不上时代了. 有时我在想:APP,你 ...
- [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?
你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...
- 你真的会玩SQL吗?之逻辑查询处理阶段
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- SQL Server中SELECT会真的阻塞SELECT吗?
在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...
- 您真的理解了SQLSERVER的日志链了吗?
您真的理解了SQLSERVER的日志链了吗? 先感谢宋沄剑给本人指点迷津,还有郭忠辉童鞋今天在QQ群里抛出的问题 这个问题跟宋沄剑讨论了三天,再次感谢宋沄剑 一直以来,SQLSERVER提供了一个非常 ...
- 你真的会玩SQL吗?和平大使 内连接、外连接
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你真的会玩SQL吗?三范式、数据完整性
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你真的会玩SQL吗?让人晕头转向的三值逻辑
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
随机推荐
- 用现代C++写一个python的简易型list
std::variant介绍:en.cppreference.com/w/cpp/utility/variant 通过泛型模板(仅提供了int, double, string三种类型的存储),实现了a ...
- Vue2系列(lqz)——slot插槽 (内容分发)、2 transition过渡、3 生命周期、4 swiper学习、5 自定义组件的封装、6 自定义指令、7 过滤器
文章目录 1 slot插槽 (内容分发) 1.1 基本使用 1.2 插槽应用场景1 1.3 插槽应用场景2 1.4 具名插槽 2 transition过渡 3 生命周期 4 swiper学习 5 自定 ...
- 在 Rust 中 gRPC 使用的 protobuf 实现条件编译服务器和客户端(tonic)
前言 Rust 中 gRPC 最优秀的库是 tonic.tonic-build 的默认生成方式是生成一个带有数据类型和客户端与服务端源码,而对于分层应用,客户端尽可能不要知道服务端的代码,同时服务端也 ...
- IDEA工具第二篇:自定义Java方法注释模板
网上搜索类似的文章有很多,但是一味的复制粘贴总会出现各种奇葩问题,最后然并卵!今天特意自己研究琢磨一下,将最终结果分享给大家,100%亲测可用. 一.说明 想必大家都用过Eclipse的方法注释生成, ...
- CF1610B [Kalindrome Array]
Problem 题目简述 给你一个数列 \(a\),有这两种情况,这个数列是「可爱的」. 它本身就是回文的. 定义变量 \(x\),满足:序列 \(a\) 中所有值等于 \(x\) 的元素删除之后,它 ...
- 将.View.dll文件反编译出来的*Views*.cs文件转换成.cshtml
先使用反编译工具将.View.dll文件反编译放入文件夹,然后将文件夹整体复制进\src\viewcs2cshtml\viewcs2cshtml\bin\Debug\net6.0\viewcs 复制完 ...
- C++ 入门防爆零教程(上册)
## C++ 入门防爆零教程(上册) ###### C++ Introductory Explosion Proof Zero Tutorial(Volume $1$) 编写者:美公鸡(洛谷账号:b ...
- (Good topic)圆圈中最后剩下的数字(leetcode 3.30每日打卡)
著名的约瑟夫问题: 0,1,,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 例如,0.1.2.3.4这5个数字组成一个圆圈,从数字0开 ...
- HTML5实战—canvas绘图之贝塞尔曲线
1.二次贝塞尔曲线 quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标, x,y表示终点坐标: 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1. ...
- GMAC网卡Fixed-Link模式
GMAC网卡Fixed-Link模式 GMAC fixed-link固定链接模式,mac与对端的连接方式是写死的,通常用于mac to mac(不排除mac to phy的情况).内核要支持fixed ...