使用github工作流发布npm包和github packages

 package.json配置

  使用npm init创建package.json文件，并填写详细信息

npm init

// package.json

{
  "name": "@Chelase/sky-tiptap", // 包名
  "version": "1.0.3", // 版本号
  "description": "A plugin",
  "license": "MIT", // 开源协议
  "author": {
    "name": "Chelsea", // 作者
    "email": "your-email@example.com", 邮箱
    "url": "https://github.com" // 主页
  },
  "repository": { 
    "type": "git",
    "url": "https://github.com/Chelase/sky-tiptap.git" // github仓库
  },
  "keywords": [ // 关键词
    "tiptap",
    "vue3",
    "rich-text-editor",
    "wysiwyg"
  ],
  "files": [ // 打包后发布为包的文件
    "dist",
    "README.md",
    "CHANGELOG.md"
  ],
  "main": "./dist/sky-tiptap.umd.js", // 入口文件
  "module": "./dist/sky-tiptap.es.js", // 模块入口
  "exports": { // 模块导出路径
    ".": {
      "import": "./dist/sky-tiptap.es.js",
      "require": "./dist/sky-tiptap.umd.js"
    }
  },
  "scripts": { // 运行命令
    "build": "vite build && npm run postbuild",
    "postbuild": "rimraf ./dist/assets",
    "prepack": "npm run build",
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
  },
  "dependencies": { // 生产环境依赖
    "@tiptap/extension-code-block-lowlight": "^2.11.3",
    "@tiptap/extension-highlight": "^2.11.3",
    "@tiptap/extension-image": "^2.11.3",
    "@tiptap/extension-typography": "^2.11.3",
    "@tiptap/extension-youtube": "^2.11.3",
    "@tiptap/starter-kit": "^2.11.3",
    "@tiptap/vue-3": "^2.11.3",
    "@vitejs/plugin-vue": "^5.2.1",
    "lowlight": "^3.3.0",
    "vue": "^3.5.13"
  },
  "devDependencies": { // 开发环境依赖
    "conventional-changelog-cli": "^4.0.0",
    "rimraf": "^6.0.0",
    "vite": "^6.0.11"
  },
  "publishConfig": {
    "access": "public",
    "registry": "https://npm.pkg.github.com"
  },
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=10.0.0"
  }
}

添加github工作流

前提条件

申请npm Access Tokens

前往npm | Home注册账号，点击头像选择Access Tokens，创建token

github token

找到设置\开发者设置，选择Generate new token (classic)

选择写入包的权限 

添加github仓库密钥

分别填写

NPM_TOKEN：你申请的npm access token

GH_PACKAGES_TOKEN：你的github token

可在根目录下创建.github/workflows/publish.yml文件

# .github/workflows/publish.yml

name: Publish Package

on:
  push:
    branches: [master]
#    tags:
#      - 'v**'

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      # 新增：配置 Git 用户信息
      - name: Configure Git
        run: |
          git config --global user.name "your name"
          git config --global user.email "your email"

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Cache Node Modules
        uses: actions/cache@v4

      - name: Install Dependencies
        run: npm ci  # 使用精确依赖安装

      - name: Build Package
        run: npm run build  # 构建步骤

      # 自动更新补丁版本
      - name: Bump Version
        run: |
          npm version patch -m "Bump version to %s"
          git push origin master --follow-tags

      # 发布到 GitHub Packages
      - name: Publish to GitHub Packages
        if: success()
        run: |
          echo "//npm.pkg.github.com/:_authToken=${
  { secrets.GH_PACKAGES_TOKEN }}" > .npmrc
          npm publish
        env:
          NODE_AUTH_TOKEN: ${
  { secrets.GH_PACKAGES_TOKEN }}

      # 发布到 npm 官方仓库
      - name: Publish to npm
        if: success()
        run: |
          sed -i 's/"name": "@github用户名\/要发布的包名"/"name": "要发布的包名"/g' package.json
          echo "//registry.npmjs.org/:_authToken=${
  { secrets.NPM_TOKEN }}" > .npmrc
          npm publish --access public --registry=https://registry.npmjs.org
          git checkout package.json