📦 把 CLI 工具发布到 npm：gix 发布流程全解析（附 CI 自动化）

前面我们完成了 gix 的功能开发和交互优化，今天就是把它真正推向世界的一步：

如何发布 gix 到 npm，并支持自动注入版本号和 CI 自动发布。

📌 发布目标

我们要完成以下几件事：

步骤	内容
✅ 发布 npm 包	用户能通过 npx gix 或全局安装使用
✅ 注入版本号	gix -v 能自动显示版本
✅ CI 自动化发布	只要打 tag 就能自动发布 npm 包

🧱 1. 配置 package.json

🗂 设置 bin 字段

确保你的 packages/cli/package.json 有这一段：

json 复制代码

"bin": {
  "gix": "./dist/index.js"
}

这表示用户安装后可以直接通过 gix 命令调用 CLI 工具。

🧼 设置清理字段

json 复制代码

"files": [
  "dist"
],
"main": "dist/index.js",
"types": "dist/index.d.ts"

🔧 2. 构建产物

建议使用 tsup 打包：

安装：

csharp 复制代码

pnpm add -D tsup

配置命令：

json 复制代码

"scripts": {
  "build": "tsup src/index.ts --format esm,cjs --dts --target node18 --out-dir dist"
}

tsup 会生成干净的 dist 目录，含有 .js + .d.ts 文件，体积小，无需 babel。

🪄 3. 注入 CLI 工具版本号

方法一：用

package.json

注入版本号（推荐 ✅）

javascript 复制代码

import { version } from '../package.json'

program.version(version)

这要求 tsconfig 里开启：

json 复制代码

"resolveJsonModule": true

这样每次你发布 npm 包，CLI 工具显示的 gix -v 版本就是自动同步的。

🚀 4. 发布到 npm（手动）

首次发布前：

注册账号：www.npmjs.com/signup
登录账号：

npm login

发布命令：

bash 复制代码

cd packages/cli
npm publish --access public

注意 ⚠️

包名必须唯一（建议叫 @your-scope/gix）
默认发布的是 dist 内容（受 files 字段控制）
如果你用 monorepo，建议用 npm publish 而不是 pnpm publish

🤖 5. 设置 CI/CD 自动发布

推荐用 GitHub Actions + tag 推送自动发布。

示例

.github/workflows/release.yml

：

yaml 复制代码

name: Release gix CLI

on:
  push:
    tags:
      - 'v*.*.*'

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 18
          registry-url: 'https://registry.npmjs.org'

      - name: Install deps
        run: |
          corepack enable
          pnpm install --frozen-lockfile

      - name: Build CLI
        run: pnpm --filter @your-scope/gix build

      - name: Publish to npm
        run: cd packages/cli && npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

步骤：

在 GitHub 的 项目设置 > Secrets 添加：
- NPM_TOKEN：你 npm 账户的发布 token
打 tag 并 push：

perl 复制代码

pnpm version patch  # 或 minor / major
git push --follow-tags

就会自动触发发布 🎉

✅ 完整发布流程回顾

步骤	操作
🧱 CLI 工具开发完成	命令解析 + 功能实现
🛠 构建产物	tsup 打包为 dist
🔢 注入版本号	program.version(version)
📦 手动发布	npm publish --access public
🤖 自动发布	GitHub Actions + tag 推送发布

🧩 项目地址

👉 github.com/nianyi778/g...

Star 一下不迷路 ⭐

🧠 总结 & 后续思考

现在 gix 已经是一个：

支持多命令
支持参数/交互混合操作
支持版本管理 & 自动化发布

的完整 CLI 工具框架了。

未来我还计划加入：

gix changelog：自动生成版本变更日志
gix doctor：项目状态检查器
gix config：自定义配置支持
插件机制支持扩展命令

如果你对这系列文章感兴趣，欢迎评论、点赞、收藏三连！

我也会把这些内容同步整理成一份 CLI 工具开发实战文档，支持 VuePress + 示例项目集成 ✨