我理解的`npm pack` 和 `npm install <local-path>`

背景

去年公司采购vue2nes服务，今年不再采购，成立了一个前端专家组。作为核心成员，需要在进行漏洞修复后发布到公司私有源，所以需要详细学习了解发布到npm过程和注意事项。而发布前的测试是重要的一环，通过npm pack 和 npm install <local-path>这两个命令组合起来，就是你在发布npm包之前，进行本地测试的利器！

一、npm pack 到底做了什么？（打包手术）

想象你有个玩具工厂（项目），npm pack 就是把它打包成运输箱的过程：

# 在项目目录执行
npm pack

执行后发生了什么？

1. 读取 package.json 的 name 和 version（比如 my-plugin@1.0.0）
2. 根据 files 字段（或 .npmignore）选择要打包的文件
3. 生成一个压缩包：my-plugin-1.0.0.tgz
4. 这个压缩包就是准备发往 npm 仓库的"货物"

文件结构示例：

my-plugin/
├── src/
│   └── index.js       # 核心代码
├── package.json       # 包含 "files": ["dist"]
├── .npmignore         # 忽略测试文件
└── dist/
    └── bundle.js      # 实际打包文件

打包后的 .tgz 内容：

# 解压后看到的实际发布内容
my-plugin-1.0.0/
└── dist/
    └── bundle.js      # 只有这个文件被打包进去

为什么重要？

• ✅ 验证发布内容：确保不会泄露敏感文件（如 .env）
• ✅ 检查文件缺失：确认 main 字段指向的文件存在
• ✅ 模拟真实发布：压缩包内容和 npm 下载的完全一致

---

二、npm install ./your-plugin-project-folder（本地安装测试）

这个操作相当于："不通过快递，直接从隔壁工厂拿货"

# 在测试项目目录执行
npm install ../my-plugin  # 指向本地插件目录

执行过程详解：

1. npm 找到本地路径 ../my-plugin

2. 自动执行 npm pack 生成临时压缩包

3. 将压缩包解压到 node_modules/my-plugin

4. 在 package.json 记录特殊依赖：

   "dependencies": {
     "my-plugin": "file:../my-plugin"
   }

真实示例演示：

# 创建测试项目
mkdir test-project && cd test-project
npm init -y

# 安装本地插件 (假设插件在相邻目录)
npm install ../my-plugin

# 验证安装
ls node_modules/my-plugin
# 应看到 dist/bundle.js 等文件

为什么需要这个操作？

1. 快速验证：修复 bug 后立即测试，不用等发布
2. 断网开发：没有网络也能测试 npm 包
3. 依赖链测试：当插件依赖其他本地包时特别有用

---

三、组合使用实战演示

假设我们开发了一个日期格式化插件：

步骤1：在插件项目打包

# 在 my-date-formatter 目录
npm run build   # 生成 dist 文件
npm pack        # 生成 my-date-formatter-1.2.0.tgz

步骤2：在测试项目安装

# 在 test-project 目录
npm install ../my-date-formatter

# 使用插件
// test.js
const formatter = require('my-date-formatter')
console.log(formatter(new Date())) // 输出 "2023-07-25"

步骤3：修改后实时更新

# 修改插件代码后
cd ../my-date-formatter
npm run build   # 重新构建

# 测试项目会自动检测变化！
# 无需重新install，下次执行就会用新代码

---

四、底层原理图解

graph LR A[你的插件项目] -->|1. npm pack| B[生成.tgz压缩包] B -->|包含| C[package.json指定文件] D[测试项目] -->|2. npm install ../path| E[触发本地打包] E --> F[创建符号链接] F --> G[node_modules/插件名] H[运行代码] -->|require| G G -->|读取| I[本地最新文件]

关键机制：

1. 符号链接(Symlink)：实际是创建了"快捷方式"指向你的源码目录

   # 查看真实链接 (Mac/Linux)
   ls -l node_modules/my-plugin
   # 输出: ../my-plugin/dist -> 真实路径

2. 文件监控：npm 会监控源文件变化，下次执行自动更新

3. 版本锁定 ：即使本地修改，package.json 仍记录确定版本

   {
     "my-plugin": "file:../my-plugin"
   }

---

五、什么时候用？

场景	npm pack	npm install ./path
检查发布内容	✅	❌
快速验证插件修改	❌	✅
离线环境测试	❌	✅
准备正式发布到 npm	✅	❌
调试插件相互依赖	❌	✅

总结

• npm pack：把你的项目打包成 .tgz 文件，这个文件就是发布到npm时会传送的内容。用于检查发布内容和本地测试安装。

• npm install <local-path>：把本地的一个文件夹或者 .tgz 文件安装到当前项目的 node_modules 中。用于在不发布到远程仓库的情况下，测试本地包的功能。

记住这两个命令就像"工厂质检"和"直供通道"，能帮你避免把有问题的插件发布到线上！