npm 包构建与发布

紧接上文比 IDEA 容器自动化部署更轻量便捷的工具，本文开始介绍 npm 包构建与发布流程。

npm 包的构建与发布流程分为：项目初始化 ------> 项目核心逻辑编写 ------> 项目构建 ------> 本地测试 ------> 发布上线。下面将对上述流程进行说明。

项目初始化

bash 复制代码

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中设置好主入口。

json 复制代码

# package.json

# 对于CJS (CommonJS)
"main": "dist/index.js",

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

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

直接使用tsc：

json 复制代码

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

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

json 复制代码

"clean": "rimraf dist build"

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

json 复制代码

# package.json
"bin": {
    "xx": "./dist/bin/index.js" // xx一般为包名
},

# index.js 开头需要添加
// #!/usr/bin/env node

本地测试

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

软链接

bash 复制代码

# 在目录包中执行
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 字段
无法完全真实模拟发布的包

真实安装包

本地打包并测试安装

bash 复制代码

# 包目录下
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 前需要进行特定的处理，则需配置命令，下面命令实现了在每次发布前进行清理和构建操作。

json 复制代码

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

发布检查

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