XSN Element Lite Workspace

ElementUI 风格的 Vue 3 组件库发布环境，采用 Monorepo 架构，支持分包模式、按需引入与整体安装。

目录结构

.
├─ package.json            # 根配置，管理脚本与 devDependencies
├─ pnpm-workspace.yaml     # pnpm 工作区
├─ tsconfig.base.json      # 共享 TS 配置
├─ .npmrc                  # npm 发布配置
├─ .changeset/             # Changesets 版本管理配置
├─ .github/workflows/      # CI/CD 工作流
└─ packages
   ├─ element-lite         # 对外发布的聚合包
   ├─ button               # @xsn/button 子包
   ├─ input                # @xsn/input 子包
   └─ utils                # 工具与 withInstall

快速开始

# 安装依赖
pnpm install

# 构建所有子包
pnpm build

# 开发模式
pnpm dev

# 代码检查
pnpm lint

# 运行测试
pnpm test

# 清理构建产物
pnpm clean

版本管理与发布

本项目使用 Changesets 进行版本管理和发布。

发布流程

1. 添加变更（Changeset）

当你完成功能开发或修复后，需要添加一个 changeset 来描述变更：

pnpm changeset

这会引导你：

• 选择需要更新的包（可以多选）
• 选择版本类型：
  • major: 破坏性变更
  • minor: 新功能（向后兼容）
  • patch: 修复（向后兼容）
• 输入变更描述

这会在 .changeset/ 目录下生成一个 markdown 文件，提交这个文件到 Git。

2. 更新版本号

当准备发布时，运行：

pnpm version-packages

这个命令会：

• 根据 changesets 更新各包的版本号
• 更新依赖关系
• 生成/更新 CHANGELOG.md
• 删除已处理的 changeset 文件

3. 发布到 npm

pnpm release

这个命令会：

• 构建所有包
• 发布到 npm registry

注意：发布前确保：

• 已登录 npm：npm login
• 已设置 npm token（如果使用 CI/CD）

自动化发布（推荐）

如果配置了 GitHub Actions，发布流程会自动进行：

1. 提交 changeset：开发完成后运行 pnpm changeset 并提交
2. 推送到 main 分支：GitHub Actions 会自动检测 changesets
3. 创建版本 PR：如果有 changesets，会自动创建一个 "Version Packages" 的 PR
4. 合并 PR：合并后会自动发布到 npm

手动发布

如果需要手动发布：

# 1. 添加变更
pnpm changeset

# 2. 提交 changeset
git add .changeset
git commit -m "chore: add changeset"

# 3. 更新版本
pnpm version-packages

# 4. 提交版本更新
git add .
git commit -m "chore: version packages"
git push

# 5. 发布（如果使用 CI，会自动发布；否则手动运行）
pnpm release

分包发布

• 每个组件子包独立 package.json、tsup.config.ts
• 构建后会在 dist/ 中产出 cjs + esm + dts
• 聚合包 @xsn/element-lite 依赖并 re-export 所有组件
• 支持按需引入单个组件或整体引入

新增组件

1. 在 packages/ 下创建新组件目录
2. 复制现有组件模板（如 button）
3. 修改 package.json 中的 name、description
4. 使用 withInstall 包裹组件，确保既能按需也能通过 app.use 安装
5. 在聚合包 @xsn/element-lite 中注册新组件
6. 添加 changeset 描述变更

配置说明

.npmrc

配置 npm registry 和发布相关设置。如果使用私有 registry，请修改 registry 字段。

Changesets 配置

.changeset/config.json 中配置了：

• access: "public" - 发布为公开包
• baseBranch: "main" - 主分支名称
• updateInternalDependencies: "patch" - 内部依赖更新策略

CI/CD

• CI 工作流 (.github/workflows/ci.yml)：在 PR 和 push 时运行 lint、build、test
• Release 工作流 (.github/workflows/release.yml)：自动检测 changesets 并发布

注意事项

1. 版本号管理：使用 changesets 管理版本，不要手动修改 package.json 中的版本号
2. 发布权限：确保有 npm 发布权限，并在 CI 中配置 NPM_TOKEN
3. 依赖关系：workspace 依赖会自动处理，发布时会转换为实际版本号
4. 构建产物：确保 package.json 中的 files 字段包含需要发布的文件