npx 的使用原理,以及使用 npx 的一些注意事项

如何使用npx

npx pkg-name

如果自己开发了一个cli第三方包

只需要在项目中执行npx <pkg-name> <bin>即可,没安装则会去远程下载。

npx bin

当执行 $ npx <command> 相关命令的时候,npx 会先本地找(可以是项目中的也可以是本机的)寻找这个 command,没找到不会去远程下载。

npx 执行的过程

首先使用npx的时候,会首先检查路径中是否存在要执行的包(即在项目中),如果存在,它将执行。若不存在,意味着尚未安装该软件包,npx将安装其最新版本,然后执行它。

1、临时安装可执行依赖包,不用全局安装,不用担心长期的污染。

2、可以执行依赖包中的命令,安装完成自动运行。

3、自动加载node_modules中依赖包,不用指定$PATH。

4、可以指定node版本、命令的版本,解决了不同项目使用不同版本的命令的问题。

注意事项

npx临时安装的模块会被缓存到.npm/_npx目录中,如果你使用 npx 去运行指令时,它会优先从缓存中查找已安装的包 。如果缓存中有该包的旧版本,它会使用缓存中的旧版本,而不会自动更新到最新的版本,如果要安装最新的则添加--ignore-existing

这是因为 npx 的设计目标之一是在执行命令时保持稳定性和一致性。如果每次执行命令都自动更新依赖的包,可能会导致不同时间执行的命令结果不一致,因为包的版本可能会有变化。

使用场景

1、调用项目内部安装的模块

npx 想要解决的主要问题,就是调用项目内部安装的模块。

比如,项目内部安装了测试工具webpack。

非全局安装
npm install webpack -D

如果我们查看webpack的版本,需用命令:

项目的根目录下执行
node-modules/.bin/webpack -v

改用 npx
npx webpack -v

npx 可以直接调用项目内部安装的模块。

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

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

2、避免全局安装模块,只想临时使用

比如:create-react-app 这个模块是全局安装,npx 可以运行它,而且不进行全局安装。

npx create-react-app my-react-app

上面代码运行时,npxcreate-react-app 下载到一个临时目录.npm/_npx

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

1、 强制使用本地模块,不下载远程模块

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

2、 忽略本地的同名模块,强制使用远程模块

如果本地存在同名的模块,但是还是想使用远程的新版本模块,可以使用--ignore-existing参数。

比如:本地已经全局安装了 create-react-app,但还是想使用远程模块,就用这个参数:

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

相关推荐
code_YuJun12 小时前
corepack 作用
前端
千寻girling12 小时前
Koa.js 教程 | 一份不可多得的 Node.js 的 Web 框架 Koa.js 教程
前端·后端·面试
全栈前端老曹12 小时前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
code_YuJun12 小时前
pnpm-workspace.yaml
前端
天才熊猫君12 小时前
“破案”笔记:iframe动态加载内容后,打印功能为何失灵?
前端
五月君_12 小时前
炸裂!Claude Opus 4.6 与 GPT-5.3 同日发布:前端人的“自动驾驶“时刻到了?
前端·gpt
Mr Xu_12 小时前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
鹏北海-RemHusband13 小时前
从零到一:基于 micro-app 的企业级微前端模板完整实现指南
前端·微服务·架构
LYFlied13 小时前
AI大时代下前端跨端解决方案的现状与演进路径
前端·人工智能
光影少年13 小时前
AI 前端 / 高级前端
前端·人工智能·状态模式