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

背景

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

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

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

bash 复制代码

# 在项目目录执行
npm pack

执行后发生了什么？

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

文件结构示例：

perl 复制代码

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

打包后的 .tgz 内容：

bash 复制代码

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

为什么重要？

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

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

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

bash 复制代码

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

执行过程详解：

npm 找到本地路径 ../my-plugin
自动执行 npm pack 生成临时压缩包
将压缩包解压到 node_modules/my-plugin

在 package.json 记录特殊依赖：

json 复制代码

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

真实示例演示：

bash 复制代码

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

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

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

为什么需要这个操作？

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

三、组合使用实战演示

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

步骤1：在插件项目打包

bash 复制代码

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

步骤2：在测试项目安装

bash 复制代码

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

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

步骤3：修改后实时更新

bash 复制代码

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

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

四、底层原理图解

关键机制：

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

bash 复制代码

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

文件监控：npm 会监控源文件变化，下次执行自动更新
版本锁定 ：即使本地修改，package.json 仍记录确定版本
json 复制代码
```
{
  "my-plugin": "file:../my-plugin"
}
```

五、什么时候用？

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

总结

npm pack：把你的项目打包成 .tgz 文件，这个文件就是发布到npm时会传送的内容。用于检查发布内容和本地测试安装。
npm install <local-path>：把本地的一个文件夹或者 .tgz 文件安装到当前项目的 node_modules 中。用于在不发布到远程仓库的情况下，测试本地包的功能。

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

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

背景

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

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

三、组合使用实战演示

四、底层原理图解

五、什么时候用？

总结

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

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