npm pack使用

npm pack 的作用主要是从包中创建一个压缩文件(tarball),通常具有.tgz扩展名,包含了打包的模块及其依赖,可用于分发或部署 。其应用场景包括私有库或组件的分发、离线环境的依赖安装、CI/CD 自动化构建等

在使用npm管理第三方模块时,这些模块会被安装在 node_modules 目录下。当我们需要把某些模块给其他小伙伴或者搭建npm私服时,需要将node_modules 的所有模块生成N个packname-version.tgz文件,方便其他人员使用npm install packname-version.tgz命令安装

执行npm pack命令时,npm会根据模块的package.json文件,将模块及其依赖打包成一个.tgz(压缩的tar文件)格式的文件。此文件可以在其他项目中作为依赖使用,或者上传到注册表供他人下载和使用。如果不提供任何参数运行npm pack,则默认打包当前目录中的模块。简单说就是进入需要打成 .tgz 的包目录中执行npm pack命令,就可生成该包对应的.tgz压缩文件。

当然我们可以手动进入某个目录执行npm pack命令来使用。也可以自动的进行打包,nodejs中有提供对应的模块及方法,下面来个示例:

1. 随便建个文件夹,我这里叫npm-package

2. 执行npm init -y

3. 创建index.js文件

index.js

javascript 复制代码
const path = require('path')
const fs = require('fs')
const { execSync } = require('child_process')

// 先判断根目录是否有packages文件夹(用于存放.tgz包),如果没有则创建
const packageDir = path.join(__dirname, './packages')
if(!fs.existsSync(packageDir)) {
  fs.mkdirSync(packageDir)
}

// node_modules 路径
const nodeModulesDir = path.join(__dirname, './node_modules')

// 过滤掉以 "."、"@"开头的包
const modules = fs.readdirSync(nodeModulesDir).filter(name => !name.startsWith('.') && !name.startsWith('@'))

for(let name of modules) {
  // 有的包执行npm pack可能会报错(具体原因暂未深入探索,真正用到再补充),所以采用try catch
  try {
    const targetDir = path.join(nodeModulesDir, name)
    // 执行npm pack命令
    execSync('npm pack', { cwd: targetDir })
    // 从该包中找出.tgz
    const tgz = fs.readdirSync(targetDir).find(item => item.endsWith('.tgz'))
    if(tgz) {
      // 移动.tgz压缩包文件到根目录packages 名称修改为包名
      fs.renameSync(path.join(targetDir, tgz), path.join(packageDir, `${name}.tgz`))
    }
  } catch {}
}

4. 修改根目录package.json

修改package.json中的scripts,增加postinstall脚本(postinstall会在npm install 执行完后自动执行该脚本),如下:

5. 虽然安装几个包试试

我这里随便装个我自己的包(wft-util)和element-ui、html2canvas吧

javascript 复制代码
// 先安装需要的包
npm i wft-utils element-ui html2canvas

// 然后再执行 npm install (否则postinstall 不会触发) or 或者手动执行node ./index.js也行
npm install

6. 效果如下:

大家可以看到在根目录自动创建了packages目录 并自动将node_modules中的依赖包打成.tgz的包并移动到packages中。packages这个包就是我们所需要的。我们可以将该包放在自己公司私服上或者其他操作都行,它是可以npm install供我们使用。

相关推荐
F2E_Zhangmo23 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360239 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript