如何发布一个npm库, 自动化管理版本号、生成 changelog、tag 等

这是源码共读的第39期，链接：juejin.cn/post/714587...

前置步骤

切换到npm的官方源

方法1, 直接切换

bash 复制代码

npm config set registry http://registry.npmjs.org/

方法2, 推荐使用nrm

bash 复制代码

# 全局安装
npm install -g nrm

# 查看可选地源，带*号的为当前节点
nrm ls

# 切换npm官方源
nrm use npm

配置npm的代理(科学上网)

找到科学上网的软件(这里以clash为例，常规这里的端口，就是计算机的代理端口)

我的端口是7890，修改成自己的端口

bash 复制代码

npm config set proxy http://127.0.0.1:7890
npm config set https-proxy http://127.0.0.1:7890

初始化项目

建立目录

新建一个npm项目文件夹zsj-utils, 在里面新建src文件夹，src里新建index.js，index.js就作为我们的代码主文件，在里面简单写几行代码，然后新建npm项目说明文档README.md，最后目录如下：

初始化package.json

bash 复制代码

npm init --yes

package.json的内容如下：

json 复制代码

{  
    "name": "zsj-utils",  
    "version": "1.0.0",  
    "description": "验证JavaScript中的常用类型, 工具类方法",  
    "main": "src/index.js", 
    "type": "module",  
    "scripts": {  
        "test": "echo \"Error: no test specified\" && exit 1"  
    },  
    "keywords": [],  
    "author": "",  
    "license": ""  
}

重点字段说明：

name 即npm项目包名，发布到npm时就是取的这个name名，自己取个语义化的名字，和已有的npm库不能重复；
version 版本号，更新npm包时必须修改一个更高的版本号后才能成功发布到npm，版本号最好遵循npm版本管理规范；
description 包的描述，发布到npm后你搜索该npm包时，在搜索联想列表里会显示在包名的下方，作为描述说明；
main 入口文件路径，在你通过import或require引用该npm包时就是引入的该路径的文件；
type 指定为module，其他项目可以使用 import 的方式，导入使用。

新建LICENSE文件

LICENSE即开源协议文件，这里使用MIT协议类型。项目根目录添加文件LICENSE，复制以下内容放进去：

text 复制代码

MIT License  
  
Copyright (c) 2024 zsj
  
Permission is hereby granted, free of charge, to any person obtaining a copy  
of this software and associated documentation files (the "Software"), to deal  
in the Software without restriction, including without limitation the rights  
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
copies of the Software, and to permit persons to whom the Software is  
furnished to do so, subject to the following conditions:  
  
The above copyright notice and this permission notice shall be included in all  
copies or substantial portions of the Software.  
  
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
SOFTWARE.

package.json里修改license字段值为MIT

发布npm

npm注册

如果有npm账号可以跳过这一步

方式1：在npm官网注册账号
注意：注册时机器人验证，如果出现让你验证10~15个图片，可以等待1h后再注册，不然很难通过。我就是这里卡住了。注册后，有让输入邮箱验证码，如果没有这一步，那也是注册失败了，（本人亲自体验注册了两次）。

方式2：通过终端注册，我失败了，错误时超时。当时没配代理，大家可以试试。

bash 复制代码

npm adduser

npm登录

bash 复制代码

npm login

依次输入用户名、密码、邮箱。之后会在邮箱接收一次性验证码，输入验证码即可登录成功。 注意：输入密码时，是不显示输入位数的，直接输入，完成回车即可

npm调试

建议大家第一次发布，可以在本地调试一下。npm项目根目录运行终端命令,运行后即将该npm包放进了本地npm缓存里。

bash 复制代码

npm link

在其他项目中使用以下命令，安装自己要发布的npm包zsj-utils是我的包名，这里要改成自己的：

bash 复制代码

npm link zsj-utils

取消项目aaa与npm包的关联，在引用项目下运行命令：

bash 复制代码

npm unlink zsj-utils

为了防止本地调试npm与发布后的npm混淆冲突，在调试完成后一定记得手动取消项目关联。

npm发布

在终端执行以下命令

bash 复制代码

npm publish

发布后，就可以在npm官网搜索到了。到这里就成功发布一个npm包了, 后续就可以对这个包进行下载使用。

建立github关联

项目新增.gitignore文件，添加以下内容，忽略node_modules文件夹上传

bash 复制代码

/node_modules/

新建github仓库，登录github后，右上角点击头像、Your repositories、New

填写仓库名，点击创建仓库

根据仓库提示，上传一个已经存在的项目到分支

使用git-bash初始化，并关联仓库。

bash 复制代码

# 初始化仓库
git init

# 建立仓库关联
git remote add origin git@github.com:zsj4911/zsj-utils.git

# 设置分支名为main
git branch -M main

# 添加项目文件
git add .

使用commit 提交规范，安装 `npm i git-cz -D`，并在package.json配置如下：

json 复制代码

{ 
    "scripts": { 
        "commit": "git-cz" 
     }
}

运行npm run commit commit add的文件，按照相关提示来写

项目上传到github的效果

项目文件上传至github

bash 复制代码

# 我这里push的时候，它让我使用 git push --set-upstream origin main 就成功了
git push

release-it，自动提升版本号，自动打 `tag`，生成 `changelog`

node版本需要18以上，运行前不能有add commit 操作

bash 复制代码

npm init release-it
# 选择 .release-it.json 用下面的配置，复制粘贴到 .release-it.json 中。

# 再安装 changelog 插件
npm i @release-it/conventional-changelog -D

json 复制代码

{
 "github": {
  "release": false
 },
 "git": {
  "commitMessage": "release: v${version}"
 },
 "npm": {
  "publish": false
 },
 "hooks": {
  "after:bump": "echo 更新版本成功"
 },
 "plugins": {
  "@release-it/conventional-changelog": {
   "preset": "angular",
   "infile": "CHANGELOG.md"
  }
 }
}

终端运行npm run release, 会自动提升版本，commit代码，push代码。

如何发布一个npm库, 自动化管理版本号、生成 changelog、tag 等

前置步骤

切换到npm的官方源

配置npm的代理(科学上网)

初始化项目

建立目录

初始化package.json

新建LICENSE文件

发布npm

npm注册

npm登录

npm调试

npm发布

建立github关联

使用commit 提交规范，安装 npm i git-cz -D， 并在package.json配置如下：

release-it，自动提升版本号，自动打 tag，生成 changelog

使用commit 提交规范，安装 `npm i git-cz -D`，并在package.json配置如下：

release-it，自动提升版本号，自动打 `tag`，生成 `changelog`