在前端开发中，我们经常执行 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 -y2. 创建核心代码 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 注册表，我们可以一键获取并复用全世界开发者的智慧。
希望这份笔记对你有帮助！如果你觉得有用，欢迎点赞收藏！