一、注册npm账号

前往 Npm官网地址 注册一个账号

二、制作npm包

  1. 确定npm包名字，可以使用 npm search xxx 来判断 ```powershell — 未占用 npm search just-npm-demo No matches found for “just-npm-demo”

— 已占用 npm search countyournumber NAME | DESCRIPTION | AUTHOR | DATE
countyournumber | 封装bignumber.js | =huangxiaotao | 2021-11-16 | 

  2. 2. 在github建立一个仓库，以 just-npm-demo 为例
  4. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21580132/1637116036367-5c36ae4e-15c4-443c-bdf9-4f332958798d.png#clientId=u1db7191b-277a-4&from=paste&height=854&id=EkeHV&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1708&originWidth=1562&originalType=binary&ratio=1&size=246109&status=done&style=none&taskId=ufbfa59ef-29d5-4857-98ef-70e4417c559&width=781)
  6. 3. clone仓库到本地，再 npm init -y 快速创建 package.json，并创建 index.js
  8. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21580132/1637116707607-aaa74d4e-148c-489e-b558-272f9b943c16.png#clientId=u1db7191b-277a-4&from=paste&height=113&id=u2fd69d2b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=142&originWidth=191&originalType=binary&ratio=1&size=7888&status=done&style=none&taskId=u6c35d466-bb33-4bf4-b77f-aad6f564498&width=151.5)
  10. 4. 简单编写一些代码
  12. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21580132/1637117931689-b6ce5985-ecf5-4d69-9c6c-d3d69ce38fd5.png#clientId=u1db7191b-277a-4&from=paste&height=90&id=u4c164cf2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=179&originWidth=212&originalType=binary&ratio=1&size=10529&status=done&style=none&taskId=u6445c3fd-61d4-4dc0-bed2-c18bdd54943&width=106)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21580132/1637117939394-f3e4a3cb-109a-4171-b8e0-c04cbf904890.png#clientId=u1db7191b-277a-4&from=paste&height=80&id=u63444813&margin=%5Bobject%20Object%5D&name=image.png&originHeight=160&originWidth=287&originalType=binary&ratio=1&size=10138&status=done&style=none&taskId=uf70e9823-e04c-4115-95d1-e1005bf7279&width=143.5)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21580132/1637117950200-f1633e54-d7b0-4fcf-ab3e-7ac8375a24f5.png#clientId=u1db7191b-277a-4&from=paste&height=47&id=u554a4a8f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=93&originWidth=389&originalType=binary&ratio=1&size=7181&status=done&style=none&taskId=u51cce82c-f0f1-40cc-89b6-c2739c4f624&width=194.5)
  14. 5. 编写测试
  15. ```powershell
  16. cnpm install mocha -D

image.png
image.png

  1. 发布到npm
    1. npm publish
    image.png

image.png

三、通过Github Actions自动发包到npm

  1. 将代码推送到github
  2. 到actions中找到 Publish Node.js Package

image.png

  1. 修改npm-publish.yml文件 ```yaml name: Node.js Package

on: push: branches:

  1. - main

jobs: publish-npm: runs-on: ubuntu-latest steps:

  1.   - uses: actions/checkout@v2
  2.   - uses: actions/setup-node@v2
  3.     with:
  4.       node-version: 14
  5.       registry-url: https://registry.npmjs.org/
  6.   - run: npm install
  7.   - run: npm run test
  8.   - run: npm publish
  9.     env:
  10.       NODE_AUTH_TOKEN: ${{secrets.npm_token}}

```

  1. 在npm官网获取token

image.png
image.png

  1. 将npm生成的token设置到仓库中

image.png
Name填 npm-publish.yml文件中的 npm_token
image.png

  1. 至此只要再次往main分支推送代码，github就会自动将包发布到npm

参考链接

Github Actions实现Npm包自动化发布
Github 持续化集成 工作流 Npm包自动化发布
github actions 简易入门及自动部署博客实践