深度拆解：从 npm install 到手写一个全局 CLI 工具

在前端开发中，我们经常执行 npm install @vue/cli -g。执行完后，为什么就能在终端随处输入 vue 命令？电脑背后做了什么？如何拥有一个属于自己的命令？本文将带你一探究竟。

一、命令拆解：`npm install @vue/cli -g`

npm: Node 包管理器，负责下载、安装和管理依赖。
install (i): 告诉 npm 执行安装动作。
@vue/cli : 包名。@vue 是组织命名空间，cli 是具体工具。
-g (Global) : 关键参数。表示全局安装，这是命令能"随处可用"的前提。

二、核心原理：为什么全局安装后命令能随处可用？

当你按下回车键执行命令时，系统内部经历了一场"接力赛"：

1. 寻找"快捷方式"

在 Windows 或 macOS/Linux 中，系统都有一个环境变量叫 PATH。

当你全局安装包时，npm 会把包下载到全局目录，并同时在系统的 PATH 路径下创建一个同名的快捷方式（软链接）。
当你输入 vue 时，Shell（终端）会去 PATH 包含的文件夹里挨个找，最终找到了这个快捷方式。

2. 识别"解释器"（Shebang）

找到文件后，系统会读取文件的第一行。通常 CLI 工具的第一行是：

javascript 复制代码

#!/usr/bin/env node

这行代码叫 Shebang 。它告诉操作系统："虽然这看起来是个文本文件，但请调用 Node.js 来运行我"。

3. 运行脚本

系统启动 Node.js，并将剩下的参数（如 create my-project）传递给脚本，脚本开始执行逻辑（如创建文件夹、拉取模板）。

三、实战：手写一个自己的 CLI 命令

理解命令最好的方式是自己写一个。

1. 初始化项目

bash 复制代码

mkdir my-cli && cd my-cli
npm init -y

2. 创建核心代码 `index.js`

文件顶部必须加上 Shebang：

javascript 复制代码

#!/usr/bin/env node

console.log("你好！这是我的第一个全局命令！");

// 获取用户输入的参数
const args = process.argv.slice(2);
if (args.length > 0) {
    console.log(`你输入的参数是: ${args.join(', ')}`);
}

3. 配置 `package.json`

添加 bin 字段，建立"命令名"到"脚本文件"的映射：

json 复制代码

{
  "name": "hi-cli",
  "version": "1.0.0",
  "bin": {
    "hi-cli": "./index.js"
  }
}

4. 本地模拟安装

在当前目录下运行：

bash 复制代码

npm link

现在，你可以在电脑任何地方输入 hi-cli hello 看看效果了！

四、进阶：npm 它是如何找到代码并下载的？

当你执行安装命令时，npm 经历了以下流程：

确定源（Registry）：检查是去 npm 官方源（registry.npmjs.org）还是淘宝镜像源。
获取元数据：请求服务器获取包的 JSON 信息（包含所有版本号、下载地址、哈希值）。
下载压缩包 ：根据版本要求找到 .tar.gz 地址，下载到本地缓存。
校验与解压 ：通过哈希值检查文件是否完整，然后解压到全局 node_modules。
生成软链 ：根据 package.json 里的 bin 配置，在系统 PATH 下生成可执行的快捷方式。

五、成果分享：如何发布你的命令到 npm？

想让全世界的人都用你的 hi-cli？只需简单几步：

1. 注册与验证

在 npmjs.com 注册账号。
必须去邮箱完成验证（否则发布会报 403 错误）。

2. 登录与发布

切换到官方源 （如果是淘宝源无法发布）： npm config set registry https://registry.npmjs.org/
登录： npm login
发布： npm publish (如果是作用域包如 @me/hi-cli，需使用 npm publish --access public)

3. 关于淘宝镜像

你不需要手动上传到淘宝镜像。官方 npm 发布后，淘宝镜像通常会在几分钟内自动同步。如果没有同步，可以去 npmmirror.com 手动点击 Sync。

六、总结

命令的本质 ：是一个在 package.json 中配置了名字、并被放在系统环境变量路径下的普通脚本文件。
全局安装的意义：在于建立系统级快捷方式。
开发者的力量：通过 npm 注册表，我们可以一键获取并复用全世界开发者的智慧。

希望这份笔记对你有帮助！如果你觉得有用，欢迎点赞收藏！

深度拆解：从 npm install 到手写一个全局 CLI 工具

一、 命令拆解：npm install @vue/cli -g

二、 核心原理：为什么全局安装后命令能随处可用？