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

缺点

  1. create-react-app 安装项目本身是一个低频次操作,全局安装不具备必要性,同时如果其它低频次工具也全局安装,势必会造成全局 path 混乱和冗余。
  2. npm 生态系统越来越倾向于将工具安装为项目本地 devDependencies ,让每个项目独立管理工具的版本,而不是都是用全局安装的固定版本。

做法二,不全局安装,需要先进入脚手架目录,再调用这个命令:

npm install create-react-app -D

cd node-modules/.bin/

create-react-app test-react

或者将 create-react-app 命令添加到 package.jsonscripts

缺点

这样做每个项目可以安装不同的脚手架版本,但操作还是略微繁琐,同时每个项目都安装一遍脚手架工具也是不必要的。

npx 就是为了解决这些问题,下面我们来了解一下。

npx 基本用法

了解基本用法之前,我们先看看 npx 的安装。

安装

在安装完 node 以及 npm 后,会默认安装 npm 相同版本号的 npx 工具,当然也可以独立安装:

npm install -g npx

执行命令

npx create-react-app

使用 npx 执行一个工具非常简单,不需要提前安装 create-react-app ,直接使用 npx 就可以执行这个工具,这源于 npx 的查找流程:

  1. 先自动查找当前项目依赖包中的可执行文件,也就是 node-modules/.bin/
  2. 如果找不到,就会去全局 $PATH 中查找,所以全局安装的包不会重复安装;
  3. 如果依然找不到,就会帮你临时安装,执行完命令后再删除包。

拥有 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和入口脚本。

本文具体参考了以下文章:

你真的会用 npx 吗❓❓❓的更多相关文章

  1. npx命令介绍

    什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If you do not have a package.json, create one before installing ...

  2. npx命令

    npx命令 查了一下, 英文资料: https://www.npmjs.com/package/npx 中文资料: 什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If yo ...

  3. App你真的需要么

    随着智能手机.移动路联网的普及,APP火的一塌糊涂,APP应用可谓五花八门,街上经常看到各种推广:扫码安装送东西,送优惠券.仿佛一夜之间一个企业没有自己的APP就跟不上时代了. 有时我在想:APP,你 ...

  4. [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?

    你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...

  5. 你真的会玩SQL吗?之逻辑查询处理阶段

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  6. SQL Server中SELECT会真的阻塞SELECT吗?

    在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...

  7. 您真的理解了SQLSERVER的日志链了吗?

    您真的理解了SQLSERVER的日志链了吗? 先感谢宋沄剑给本人指点迷津,还有郭忠辉童鞋今天在QQ群里抛出的问题 这个问题跟宋沄剑讨论了三天,再次感谢宋沄剑 一直以来,SQLSERVER提供了一个非常 ...

  8. 你真的会玩SQL吗?和平大使 内连接、外连接

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  9. 你真的会玩SQL吗?三范式、数据完整性

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  10. 你真的会玩SQL吗?让人晕头转向的三值逻辑

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

随机推荐

  1. 用现代C++写一个python的简易型list

    std::variant介绍:en.cppreference.com/w/cpp/utility/variant 通过泛型模板(仅提供了int, double, string三种类型的存储),实现了a ...

  2. 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 自定 ...

  3. 在 Rust 中 gRPC 使用的 protobuf 实现条件编译服务器和客户端(tonic)

    前言 Rust 中 gRPC 最优秀的库是 tonic.tonic-build 的默认生成方式是生成一个带有数据类型和客户端与服务端源码,而对于分层应用,客户端尽可能不要知道服务端的代码,同时服务端也 ...

  4. IDEA工具第二篇:自定义Java方法注释模板

    网上搜索类似的文章有很多,但是一味的复制粘贴总会出现各种奇葩问题,最后然并卵!今天特意自己研究琢磨一下,将最终结果分享给大家,100%亲测可用. 一.说明 想必大家都用过Eclipse的方法注释生成, ...

  5. CF1610B [Kalindrome Array]

    Problem 题目简述 给你一个数列 \(a\),有这两种情况,这个数列是「可爱的」. 它本身就是回文的. 定义变量 \(x\),满足:序列 \(a\) 中所有值等于 \(x\) 的元素删除之后,它 ...

  6. 将.View.dll文件反编译出来的*Views*.cs文件转换成.cshtml

    先使用反编译工具将.View.dll文件反编译放入文件夹,然后将文件夹整体复制进\src\viewcs2cshtml\viewcs2cshtml\bin\Debug\net6.0\viewcs 复制完 ...

  7. C++ 入门防爆零教程(上册)

    ## C++ 入门防爆零教程(上册) ######  C++ Introductory Explosion Proof Zero Tutorial(Volume $1$) 编写者:美公鸡(洛谷账号:b ...

  8. (Good topic)圆圈中最后剩下的数字(leetcode 3.30每日打卡)

    著名的约瑟夫问题: 0,1,,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 例如,0.1.2.3.4这5个数字组成一个圆圈,从数字0开 ...

  9. HTML5实战—canvas绘图之贝塞尔曲线

    1.二次贝塞尔曲线 quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标, x,y表示终点坐标: 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1. ...

  10. GMAC网卡Fixed-Link模式

    GMAC网卡Fixed-Link模式 GMAC fixed-link固定链接模式,mac与对端的连接方式是写死的,通常用于mac to mac(不排除mac to phy的情况).内核要支持fixed ...