实用指南：npm 包构建与发布

npm 包构建与发布

紧接上文比 IDEA 容器自动化部署更轻量便捷的工具，本文开始介绍 npm 包构建与发布流程。
npm 包的构建与发布流程分为：项目初始化 ——> 项目核心逻辑编写 ——> 项目构建 ——> 本地测试 ——> 发布上线。下面将对上述流程进行说明。

项目初始化

mkdir my-npm-package
cd my-npm-package
npm init -y  # 或使用 npm init 创建交互式配置

npm init 用于初始化package.json，其中name设置就为后续发布的包名，version就是包的版本(正式 pulish 后续每次更新包都需要进行 version 更改才能发布)

项目构建

项目源码一般放在src/或者packages目录下，但CLI一般是放在bin/目录下，无论放在那个文件下，都需要在package.json中设置好主入口。

# package.json
# 对于CJS (CommonJS)
"main": "dist/index.js",
# 对于ESM (ECMAScript Modules)
"type": "module",
"exports": {
".": "./dist/index.js"
}

如果是TypeScript或者Babel需要添加构建流程

• 直接使用tsc：

"scripts": {
"build": "tsc"
}

• 构建前删除前一次构建产物，利用库 rimraf：npm install --save-dev rimraf

"clean": "rimraf dist build"

• 如果需编写工具包，且希望该包能在全局下运行，即可利用npm i -g xx 进行下载，并通过指令运行。

# package.json
"bin": {
"xx": "./dist/bin/index.js" // xx一般为包名
},
# index.js 开头需要添加
// #!/usr/bin/env node

本地测试

本地测试的方法主要有 软链接 和 真实构建包安装 两种方式

软链接

# 在目录包中执行
npm link
# 在另一个测试项目中
npm link my-npm-package
# 删除软链接
# 在使用项目下面（执行过 npm link 的地方）
npm unlink --no-save <你的包名># 完全删除全局命令npm unlink -g my-cli-demo 或 npm uninstall -g my-cli-demo# 检查 可以通过查看全局安装路径是否存在该软链接npm root -g

优势：

• 可以像安装普通 npm 包一样使用它来测试
• 在 link 后，源码修改后（如果是需要构建的需要重新构建），其它地方 link 该包的会自动更新为最新代码。有可能存在未更新的情况，解决办法为：删除后重新建立连接即可。

缺点：

• 会与实际发布的包有差异，link 是文件系统的软链接，一些路径相关、依赖解析、Node模块嵌套结构行为会不一样。
• 直接使用源码，依赖可能未被打包
• 未测试.npmignore / files 字段，本地 link 并不会排除 .npmignore 或 package.json 中的 files 字段
• 无法完全真实模拟发布的包

真实安装包

本地打包并测试安装

# 包目录下
npm pack # 会打包出一个 .tgz 文件
# 其它项目使用
npm install ../path/to/my-npm-package-1.0.0.tgz

发布到 npm 私有测试版本

• package.json 设置{version": "0.1.0-beta.1" }。
• 发布 npm publish --access restricted 发布到npm的测试环境
• 测试npm install your-package@0.1.0-beta.1

这个比较适合团队协同测试。

发布到 npm

• 注册 npm 账户

• 检查包名是否可用npm search your-package-name，或者访问 https://www.npmjs.com/package/your-package-name

• 添加 .npmignore，避免发布测试文件、源码等，常见配置如下：

src/
node_modules/
tests/
*.test.js

• 登录当前源npm login或者npm login --registry https://registry.npmjs.org/登录指定的源

• 发布npm publish当前的镜像源或者npm publish --registry https://registry.npmjs.org/ 发布到指定源

• 如果在 Publish 前需要进行特定的处理，则需配置命令，下面命令实现了在每次发布前进行清理和构建操作。

"prepack": "npm run clean && npm run build"

发布检查

• 进入官网查看自己的packages是否能显示该包
• 下载包进行测试