SDK-Test 自适应 SDK

一个完全自包含的 Vue 3 SDK，主项目零配置，SDK 内部自动处理开发/生产模式切换。

✨ 特性

• 🎯 主项目零配置：主项目无需任何特殊配置，直接导入即可
• 🔄 SDK 内部自适应：通过命令自动切换开发/生产模式
• 🛠️ 开发友好：开发模式直接使用源码，支持热更新
• 🚀 生产优化：生产模式使用优化构建产物
• 🎨 样式自包含：CSS 自动处理，无需手动导入

📋 主项目使用（零配置）

<template>
  <div>
    <div>当前用户：{{ sdkConfig.userInfo?.name }}</div>
    <ChatWindow />
  </div>
</template>

<script setup>
// 直接导入即可，无需任何配置
import { ChatWindow, initSdk, sdkConfig } from 'sdk-test';

initSdk({
  token: '主项目的token',
  userInfo: { name: '张三' }
})
</script>

就这么简单！主项目完全不需要任何额外配置！

🔧 SDK 开发者使用

开发模式

# 切换到开发模式（使用源码）
cd apps/sdk-test
pnpm dev-mode

输出：

🔧 切换到开发模式...
✅ 已切换到开发模式
📋 主项目现在会使用源码版本，支持热更新

生产模式

# 构建并自动切换到生产模式
cd apps/sdk-test
pnpm build

输出：

📦 切换到构建产物模式...
✅ 已切换到构建产物模式
📋 主项目现在会使用优化的构建版本

🎯 自动切换原理

开发模式 (pnpm dev-mode)

• package.json 指向源码："main": "./src/index.ts"
• 支持热更新：修改源码立即生效
• 样式处理：CSS 通过源码直接导入
• 适用场景：SDK 开发调试

生产模式 (pnpm build)

• package.json 指向构建产物："main": "./dist/index.cjs.js"
• 性能优化：代码压缩、Tree-shaking
• 样式优化：CSS 压缩合并
• 适用场景：发布、生产环境

📦 技术实现

自动切换脚本

scripts/switch-to-dist.js (构建后自动执行)

// 自动修改 package.json，指向构建产物
packageJson.main = './dist/index.cjs.js';
packageJson.module = './dist/index.es.js';
packageJson.types = './dist/index.d.ts';

scripts/switch-to-dev.js (手动切换到开发模式)

// 自动修改 package.json，指向源码
packageJson.main = './src/index.ts';
packageJson.module = './src/index.ts';
packageJson.types = './src/index.ts';

package.json 配置

{
  "scripts": {
    "build": "vite build",
    "postbuild": "node scripts/switch-to-dist.js",
    "dev-mode": "node scripts/switch-to-dev.js"
  }
}

🌟 使用场景

1. 主项目开发者

完全不需要关心 SDK 的模式，直接使用即可：

import { ChatWindow, initSdk } from 'sdk-test';
// 样式自动加载，无需任何配置

2. SDK 开发者

根据需要切换模式：

• 开发调试：pnpm dev-mode
• 发布构建：pnpm build

3. CI/CD 流程

# 自动化构建流程
pnpm install
pnpm build  # 自动切换到生产模式
pnpm publish

🔄 模式切换示例

# 1. 初始状态（开发模式）
$ cat package.json | grep '"main"'
"main": "./src/index.ts"

# 2. 构建（自动切换到生产模式）
$ pnpm build
📦 切换到构建产物模式...
✅ 已切换到构建产物模式

$ cat package.json | grep '"main"'
"main": "./dist/index.cjs.js"

# 3. 切换回开发模式
$ pnpm dev-mode
🔧 切换到开发模式...
✅ 已切换到开发模式

$ cat package.json | grep '"main"'
"main": "./src/index.ts"

📋 项目结构

sdk-test/
├── src/
│   ├── index.ts          # 主入口 + CSS导入
│   ├── index.css         # 组件样式
│   ├── components/       # Vue 组件
│   └── ...
├── dist/                 # 构建产物（构建后生成）
│   ├── index.es.js       # ES 模块
│   ├── index.cjs.js      # CommonJS
│   ├── index.d.ts        # 类型声明
│   └── index.css         # 优化样式
├── scripts/              # 切换脚本
│   ├── switch-to-dist.js # 切换到构建模式
│   └── switch-to-dev.js  # 切换到开发模式
└── package.json          # 动态配置

🎯 优势

1. 主项目零负担：完全不需要配置
2. SDK 完全可控：内部处理所有复杂逻辑
3. 开发体验好：开发时用源码，调试方便
4. 生产性能优：生产时用构建产物，体积小
5. 切换简单：一条命令搞定模式切换

🚀 快速开始

1. 主项目使用：

   import { ChatWindow, initSdk } from 'sdk-test';

2. SDK 开发：

   pnpm dev-mode   # 开发调试
   pnpm build      # 发布构建

完全不需要在主项目配置任何东西！🎉