Gradio全解13——MCP详解（4）——TypeScript包命令：npm与npx

本章目录如下：

1. 《Gradio全解13——MCP详解（1）——MCP协议介绍与架构组件》
2. 《Gradio全解13——MCP详解（2）——MCP能力协商与通信机制》
3. 《Gradio全解13——MCP详解（3）——TypeScript介绍：特点与适用领域》
4. 《Gradio全解13——MCP详解（4）——TypeScript包命令：npm与npx》
5. 《Gradio全解13——MCP详解（5）——Python包命令：uv与uvx实战》
6. 《Gradio全解13——MCP详解（6）——MCP服务器》
7. 《Gradio全解13——MCP详解（7）——MCP客户端》
8. 《Gradio全解13——MCP详解（8）——MCP六大​功能特性》
9. 《Gradio全解13——MCP详解（9）——MCP Inspector》

第13章 MCP详解

MCP是当前人工智能领域最热门技术之一，是实现大模型快速应用的捷径。本章将基于MCP最新方案修订版：2025-06-18，详细讲解MCP协议细节，并实战如何通过Gradio构建MCP客户端与服务器。

13.4 TypeScript包命令：npm与npx

MCP官方使用了以前不常见的两个命令：TypeScript的npx和Python的uvx，这两个新型的命令有何过人之处？下面两节带读者仔细了解这两个命令并实战，对于常见的npm，主要讲述npm与npx的区别和常用基本操作，而对于新兴的uv，则列举了更多的uv和uvx命令操作。

13.4.1 概念区分

npm（Node Package Manager）和npx（Node Package eXecute）在前端开发中都会时常被用到，npm大家相对熟悉（参考3.2节），npx是什么则有一定的迷惑性，和npm有什么关系和区别？下面就分别讲述。

1. npm概念与运行逻辑

简单来说，npm是一个Node包管理器，内置在Node.js中，用于发布开源Node.js项目的在线资源库，安装、共享、分发代码以及管理项目中的依赖关系，通过命令行工具CLI与线上NPM数据库进行交互，这个数据库被称为NPM Register。它的运行逻辑如下：

1. 将某个服务器作为代码仓库（repository），存放所有需要被共享的代码。
2. 软件供应商使用npm publish把代码提交到repository上，并分别取名。
3. 需要使用这些代码的人，就把软件名写到package.json里，然后运行npm install就会下载代码到本地并局部安装（项目虚拟环境安装），全局安装加符号-g。
4. 下载完的代码存在node_modules目录，可以随意使用，这些代码被叫做“包”（package）。

当可执行文件通过npm包安装时，npm会创建链接指向它们：

• 本地安装的链接是在本地./node_modules/.bin/目录下创建的。
• 全局安装会将包安装到全局的node_modules目录下，并将可执行文件链接到系统的$PATH环境变量中，通常在bin目录下创建链接，例如：Linux上的/usr/local/bin或Windows上的%AppData%/npm。

npm本身并不运行任何软件包，如果想使用npm运行一个包，有两种方式：一是必须在package.json文件中指定这个包；另一种是使用bach命令，详见操作示例。

2. npx概念及特点

npx是一个Node包执行器，npm v5.2.0引入，允许开发者在无需安装的情况下执行任意Node包，该Node包可以是本地也可以是远程的。执行本地Node包时，npx先后到环境变量$PATH和路径node_modules/.bin检查命令是否存在，如果都不存在，则执行远程Node包。远程执行时，npx会将Node包下载到一个临时目录中，使用以后再删除。npx也可以理解为少了package.json里一个script而诞生的，它极大地简化了使用纯npm时所需要的大量步骤，让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。npx主要特点：

• 临时安装可执行依赖包，不用全局安装，不用担心长期污染。
• 可以执行依赖包中的命令，安装完成自动运行。
• 自动加载node_modules中依赖包，不用指定$PATH。
• 可以指定node版本和命令，解决了不同项目使用不同版本命令的问题。

npx安装方法：

npm install -g npx

npx和npm使用场景：如果项目需要长期使用某个包，那么npm可能是更好的选择。因为npm能够将包全局安装在本地，无需每次使用都下载。而如果需要执行一次性的任务，或者尝试一些新的包，那么npx可能会更适合。npx可以临时下载并执行包，而不会留下任何痕迹。

13.4.2 操作示例

下面我们通过npm和npx执行Node包的例子来更具象的了解npm和npx的不同。

1. 使用npm执行包

使用npm执行包有两种操作方式：

1. 将Node包安装到本地：

npm install package_name
# 通过本地路径执行Node包
./node_modules/.bin/package_name

2. 也可以通过package.json中的scripts命令来执行Node包。
   package.json:

{"name": "Project-Name","version":  "x.y.z","scripts":  {"package-name":  "package-name"}
}

执行 scripts：

npm run package-name

2. 使用npx执行包

通过npx则简单很多，无需安装Node包就可以通过一个命令执行 Node 包，命令如下：

npx your-package-name

比如从本地或者远程npm包中运行一个命令，例如：

npx create-react-app my-app   # 使用create-react-app快速创建React项目
npx eslint .                  # 使用本地eslint检查代码

关于npx更多信息请参考npx。

总结：npm是一个Node包管理器，npx是一个Node包执行器。Node的执行也可由npm完成，但是必须进行安装，通过定位本地路径或者配置scripts来执行。npx则通过一个简单命令大大简化了包运行的成本，既可以运行本地包，也可以远程包，无需安装包也可以执行，这就有效避免了本地磁盘污染，节省磁盘空间。

3. 常用npm命令

以下是npm的核心命令分类及功能概述：

1. 基础项目管理命令。初始化项目：npm init或npm init -y（跳过交互式问答）创建package.json文件。‌‌‌‌
2. 依赖管理命令。安装依赖：npm install：安装package.json中所有依赖；npm install ：安装指定包（默认添加到dependencies）。‌‌‌‌卸载依赖：npm uninstall 。‌更新依赖：npm update：更新所有依赖。‌‌‌‌npm outdated：列出可更新的包。‌‌‌‌查看依赖：npm list。npm ci：使用 package-lock.json快速安装依赖，适用于CI/CD环境。
3. 运行与测试脚本命令。运行脚本：npm run<script>（或npm start），执行package.json中的自定义脚本。测试脚本：npm test<script>。
4. 配置管理‌。npm config set <key> <value>：修改配置（持久化到 ~/.npmrc），如更换镜像源：npm config set registry https://registry.npmmirror.com/。‌‌npm config list：查看当前配置。‌‌

更多命令及示例请参考：NPM使用介绍。

参考文献

1. Python开发人员，请不要低估TypeScript！
2. TypeScript“杀疯了”！60% 到 70%YC 创企用它构建 AI Agent，超越 Python 有戏了？
3. NPM vs. NPX，傻傻分不清楚
4. uv
5. Python 包管理工具核心指令uvx解析
6. MCP Introduction