Lucas's Blog
HomeArchiveTagsCategoriesAboutLabPitfallDocs

发布 npm 包

发表于 2022/05/02更新于 2022/11/20前端工程化🍵 ≈ 3 mins

一般公司内都会搭建自己的私有 npm 仓库（可以基于 nexus 搭建），主要用途：

  • 在内部服务器存储自研包，安全又方便
    • 组件库，比如基础组件/业务组件/权限组件/…
    • 工具库，比如 hooks/utils/…
  • 缓存第三方包，加速下载
  • 对 npm 包可以配置权限管理

nrm

nrm 用于管理 npm 源

npm i nrm -g
nrm --help

nrm 默认已内置一些常用 npm 源（taobao/cnpm/…），常用方法如下：

# 查看npm源列表和当前使用的npm源
nrm ls
# npm config get registry 查看当前使用的源
# 添加
nrm add <name><npm源>
# 切换
nrm use <name> # == npm config set registry <npm源>
# 删除
nrm del <name>
# 测试npm源的响应时间
nrm test <npm源>

登录

先切换到私有源，第一次登录需要先通过以下命令输入用户名、密码、邮箱

npm adduser

后续就可以直接通过以下命令登录

npm login
# 查看当前登录用户
npm whoami
# 退出
npm logout

创建包和发布

npm init 初始化 node 项目，package.json 如下：

{
  "name": "my-pkg",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "MIT",
  "main": "./bin/index.js",
  "bin": {
    "test-pkg": "./bin/index.js"
  }
}

bin 指定包的可执行文件，编辑 ./bin/index.js

#!/usr/bin/env node
console.log("007");
module.exports = "007";

#!/usr/bin/env node 的作用是告诉系统使用 node 解释脚本

调试

开发完项目后先在本地调试，进入项目目录，执行 npm link 将包链接到全局环境，然后尝试输入 test-pkg，看输出是否正常

之后记得通过 npm unlink <包名> 解除链接

版本

按语义化版本控制规范 SemVer，版本格式为：major/minor/patch，版本号递增规则如下：

  • 大版本更新（包含 breaking change）
  • 小版本更新（小的功能迭代）
  • 补丁更新（bugfix）
  • 先行版本号及版本编译信息可以加到 major/minor/patch 的后面，作为延伸。如：1.0.0-alpha.0

发包前可以通过 npm version 控制版本信息

npm version prepatch # 可以指明预发版关键词 --preid=alpha # v1.1.0-alpha.0
# v1.0.1-0
npm version prerelease
# v1.0.1-1
npm version patch # 结束预发版
# v1.0.1

发布

  1. 在 https://www.npmjs.com/signup 注册 npm 账户
  2. 在 npm 账户上启用 2FA https ://docs.npmjs.com/configuring-two-factor-authentication
  3. 在本地终端登录 npm login，后续流程如下
npm login
// 输入账号名、密码、注册所用的邮件地址、OTP秘钥，没问题就会登录成功
// Logged in as xxx on https://registry.npmjs.org/.
  1. 打包，注意 package.json 的格式如下：
{
  // name 需要声明个人账号名，即 @lucascv/包名
  "name": "@lucascv/box-resizer",
  // 每次发布需要更新 version，否则会提示发布失败
  "version": "1.0.6",
  // cjs 包入口
  "main": "lib/index.cjs.js",
  // esm 包入口
  "module": "lib/index.esm.js",
  // 不能设置为 true
  "private": false,
}

进入包目录，先打包

yarn build
npm publish --access=public

之后在本地安装新发布的包并测试

npm i -g my-pkg

输入命令 test-pkg 查看输出是否正常

# 删除包
npm unpublish <name@version>
# 删除整包
npm unpublish <name> --force

出现 401/403 报错时，需要检查登录状态和项目是否和已有包冲突；如果是公司内部仓库需要额外申请发包权限

一些实践

下面是我对第三方包的打包和发布的一些实践

npm发包