本文记录了本地发布 npm 包的流程，并且详细说明了使用 github 中的 github Actions 来自动化构建发布包的具体流程，只需要通过 push 或者 merge 就可以十分便捷的发布最新的代码包。 本文还记录了 npm 包编写以及发布的全过程，适合想尝试 npm 包发布的同学，通过参考本文，你可以尝试发布一个属于自己的 npm 包，希望这会是一篇比较详实的 npm 包发布教程。
一、本地发布 npm 包
(一) 创建包
npm init -y
生成必要的 package.json 文件，创建LICENSE及入口文件
(二) 设置 npm 默认源（可选）
// 查看npm镜像源地址
npm config get registry
// 切换npm镜像源
// 设置npm默认源
npm config set registry https://registry.npmjs.org/
顺带记录下常用的npm镜像源：
- registry.npmmirror.com/（npmmirror）
- registry.npm.taobao.org/（淘宝镜像）
(三) 设置npm账号
进入 npm官网 登录注册
(四) 登录
本地执行命令 npm login 进行登录，按步骤填写如下信息：
npm login
最后一步会有一个认证码，会以邮件形式发送至你的邮箱，复制粘贴即可完成登录。
(五) 包发布
执行命令 npm publish
npm publish
每次发布时需要更新 package.json 中的 "version": "..**"
二、使用github Actions实现自动化发布
(一) 创建或新建一个 GitHub 仓库
添加必要的文件以及license
(二) 初始化 Actions
选择对应的模板进行修改
以下是我修改后的代码：
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
name: Node.js Package
on:
# release:
# types: [created]
push:
#分支可以选择多个
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: npm ci
publish-npm:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
registry-url: https://registry.npmjs.org/
- run: npm ci
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
(三) 添加 npm_token
npm 官网中新建一个 token
在 github 中将此token保存，并命名为 npm_token，与 CI 文件中对应
(四) 自动化发布包
设置的为每次 push 或 merge 都会触发 github actions，自动化发布包。同样，也可以自己设置触发时机。
on:
# release:
# types: [created]
push:
#分支可以选择多个
branches: [main]
pull_request:
branches: [main]
如此，每次 push 都可以自动发布包了。
三、实践
这是一个封装了 JS 的一些常用方法的工具，目前只有部分函数，用于练习 NPM 包自动发布，每次 push 到 main 分支或者 merge 到 main 分支，都会自动触发 npm 包的发布。
(一) lib
目前只有两个部分，Common 函数与 Validate 函数，其中 Common 中封装了节流和防抖工具方法，Validate 中封装了一些常用的校验方法：比如手机号校验、身份证号码校验以及邮箱校验方法。
主要代码在 lib 文件夹下
// lib/index.js
import Validate from "./validate";
import Common from "./common";
export { Validate, Common };
(二) package.json
其中 main 这里配置入口文件， 此项目下为 ./lib/。keywords 可以用来配置一些关键词，增加 npm 的搜索效率。
注意，每次发布前都要手动更新一下 version，如果不改的话，git actions 会构建错误。
{
"name": "chill-utils",
"version": "1.0.7",
"description": "",
"main": "./lib/",
"files": [
"lib",
"README.md",
"LICENSE"
],
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/strugglinglee/chill-utils.git"
},
"keywords": [
"utils",
"debounce",
"throttle"
],
"author": "strugglinglee",
"license": "ISC",
"bugs": {
"url": "https://github.com/strugglinglee/chill-utils/issues"
},
"homepage": "https://github.com/strugglinglee/chill-utils#readme"
}
(三) README.md
# chill-utils
一个封装了 JS 的一些常用方法的工具
## 食用方法
1. 下载 npm 包
```shell
npm i chill-utils
```
2. 使用 Validate 校验函数
```js
import { Validate } from 'chill-utils'
const mobile = '17726366787'
Validate.mobileCheck(mobile) //true
```
3. 使用 Common 内的公共方法
```js
const trrigerDebounce = Common.debounce(async () => {
console.log('trriger debounce')// 只会打印最后一次的
})
trrigerDebounce()
trrigerDebounce()
```
写好 README.md 相关的说明就会自动同步到 npm 官网了，详见 www.npmjs.com/package/chi…
后记
以上就是 npm 包发布相关的全部内容，文章内容比较初级，后续还会记录更多关于 npm 包相关的内容，敬请期待。
