Node 第六章 npx

npx是什么

npx 是一个 npm 包执行器,它随 npm 5.2.0 版本一起引入。npx 的主要用途是方便开发者执行安装在项目本地 node_modules/.bin 目录或全局安装的 npm 包的命令。它特别有用于执行那些仅偶尔使用的、不希望全局安装的 npm 包。

npx 的主要特点和用途:

  1. 临时安装并运行包

    • 使用 npx 可以执行未全局安装的包,npx 会临时安装这些包并运行它们,执行完毕后不会保留这些包。
  2. 运行项目本地安装的包

    • 项目中经常会安装一些命令行工具作为开发依赖,例如 eslintwebpack 等。通常情况下,如果想要运行这些工具,需要在项目的脚本中定义它们或者通过项目的 node_modules/.bin 路径来运行。npx 简化了这个过程,允许直接在命令行中输入命令来执行。
  3. 避免全局安装包

    • 有时全局安装 npm 包可能会导致版本冲突或其他问题。npx 允许我们执行包而无需全局安装,减少了全局空间的污染。
  4. 执行不同版本的命令

    • 使用 npx 可以非常容易地测试或运行不同版本的命令行工具,只需指定包名和版本号。
  5. 执行 GitHub 上的包

    • npx 还可以直接执行存储在 GitHub 等代码托管服务上的包,这对于试运行开源项目中的示例脚本或工具非常方便。
  6. 增强的可执行性

    • 即使某些 npm 包不在 PATH 环境变量中,npx 也能找到并执行它们,因为它默认会在本地 node_modules/.bin 目录下寻找。

使用例子:

  • 运行本地安装的 webpack

    arduino 复制代码
     npx webpack --config webpack.config.js
  • 运行特定版本的某个包:

    sql 复制代码
     npx typescript@3.9.5 --version
  • 临时安装并运行一个可执行的包(例如创建 React 应用的 create-react-app):

    lua 复制代码
     npx create-react-app my-app

npx 提供了更灵活的包管理选项,特别是对于那些我们不想永久安装在开发环境中的工具。它是现代 JavaScript 开发工具链中的一个重要工具。

npm 和 npx 区别

npx侧重于执行命令的,执行某个模块命令。虽然会自动安装模块,但是重在执行某个命令

npm侧重于安装或者卸载某个模块的。重在安装,并不具备执行某个模块的功能。

示例1-创建react脚手架

Getting Started | Create React App 中文文档 (bootcss.com)

  • 如何查看我当前全局安装了哪些可执行文件

    • npm ls -g,没有加-g的话就是看当前项目有哪些可执行文件,加-g就是全局
  • 我们使用命令:npm install -g create-react-app,就全局安装了react的脚手架

    • 这时候,我们再使用npm ls -g命令就能够看到create-react-app@具体版本号
  • 在传统的情况下,我们可以直接执行create-react-app直接运行,但这样是有缺点的

    1. 版本直接就锁定不变了,如果更新了新版本,我们也只会停留在原地
    2. 占据磁盘的空间
  • 那npx就可以完美解决这个问题

    • 那在进行前,我们通过npm uninstall -g create-react-app全局卸载这个包
    • 我们换npx create-react-app来执行,一样是可以执行的,并且是最新版本。包括react中文网也是这样推荐的,很多其他的框架也是这样推荐的

示例2-运行vite

  • 当全局和局部项目都不存在vite命令的时候,而我又想要运行,这怎么办?
  1. 我们首先使用npm i vite -D,注意这个-D表示在局部下载,也就是说只在开发环境(Dev)下存在,全局是不存在的。
  2. 此时如果我们直接执行vite命令,就会报错了,因为我们本地的目录没有在环境变量中配置,只有在环境变量中配置才会是全局的
  3. 这时候我们就可以通过npx vite执行,会自动去找当前目录下的node_modules里bin下的vite命令进行执行,而且非常快
相关推荐
Mintopia2 分钟前
🚀 一文看懂 “Next.js 全栈 + 微服务 + GraphQL” 的整体样貌
前端·javascript·全栈
Mintopia4 分钟前
🧬 医疗Web场景下,AIGC的辅助诊断技术边界与伦理
前端·javascript·aigc
半桶水专家8 分钟前
父子组件通信详解
开发语言·前端·javascript
Watermelo61711 分钟前
从vw/h到clamp(),前端响应式设计的痛点与进化
前端·javascript·css·算法·css3·用户界面·用户体验
寻星探路15 分钟前
测试开发话题10---自动化测试常用函数(2)
java·前端·python
Moment17 分钟前
快到  2026  年了:为什么我们还在争论  CSS 和 Tailwind?
前端·javascript·css
梵得儿SHI29 分钟前
Vue 核心语法详解:模板语法中的绑定表达式与过滤器(附 Vue3 替代方案)
前端·javascript·vue.js·插值语法·vue模板语法·绑定表达式·过滤器机制
江城开朗的豌豆31 分钟前
TypeScript枚举:让你的代码更有"选择权"
前端·javascript
江城开朗的豌豆41 分钟前
TypeScript接口:打造你的代码“契约”之道
前端·javascript
江城开朗的豌豆43 分钟前
TypeScript类:面向对象编程的超级武器
前端·javascript