@mc-markets/ui 1.1.4 → 1.1.5

package/CLEAR_VITE_CACHE.md

@@ -0,0 +1,271 @@
+# 清除 Vite 缓存 - 解决导出错误
+
+## 问题
+
+```
+Uncaught (in promise) SyntaxError: The requested module '/node_modules/.vite/deps/@mc-markets_ui.js?t=xxx' 
+does not provide an export named 'MOption'
+```
+
+## 原因
+
+Vite 会缓存依赖的预构建结果到 `node_modules/.vite/deps/` 目录。当组件库更新后，如果缓存没有更新，就会出现这个错误。
+
+## 解决方案
+
+### 方案 1：删除 Vite 缓存目录（最彻底）⭐
+
+```bash
+# 在你的项目目录运行（不是组件库目录）
+cd D:\code\mcmarkets-new
+
+# Windows PowerShell
+Remove-Item -Recurse -Force node_modules\.vite
+
+# 或 Windows CMD
+rmdir /s /q node_modules\.vite
+
+# 然后重启开发服务器
+npm run dev
+```
+
+### 方案 2：使用 Vite 的强制重新优化
+
+```bash
+# 添加 --force 参数强制重新预构建依赖
+npm run dev -- --force
+```
+
+### 方案 3：清除缓存并重新安装
+
+```bash
+# 1. 删除 node_modules
+rm -rf node_modules
+
+# 2. 删除 package-lock.json
+rm package-lock.json
+
+# 3. 重新安装
+npm install
+
+# 4. 启动开发服务器
+npm run dev
+```
+
+### 方案 4：如果使用 npm link（本地开发）
+
+```bash
+# 1. 在组件库目录重新 link
+cd D:\code\npm-mc-markets-ui
+npm link
+
+# 2. 在项目目录重新 link
+cd D:\code\mcmarkets-new
+npm unlink @mc-markets/ui
+npm link @mc-markets/ui
+
+# 3. 清除 Vite 缓存
+Remove-Item -Recurse -Force node_modules\.vite
+
+# 4. 重启开发服务器
+npm run dev -- --force
+```
+
+## 验证步骤
+
+### 1. 确认组件库已正确构建
+
+在组件库目录：
+```bash
+cd D:\code\npm-mc-markets-ui
+
+# 检查构建产物
+dir dist\index.*
+
+# 验证导出
+node -e "import('./dist/index.mjs').then(m => console.log('MOption:', typeof m.MOption, 'MOptionGroup:', typeof m.MOptionGroup))"
+```
+
+预期输出：
+```
+MOption: function MOptionGroup: function
+```
+
+### 2. 确认项目依赖版本
+
+在项目目录：
+```bash
+cd D:\code\mcmarkets-new
+
+# 检查安装的版本
+npm list @mc-markets/ui
+```
+
+应该显示 `1.1.3` 或 `1.1.4`
+
+### 3. 检查 Vite 预构建文件
+
+启动开发服务器后，检查：
+```bash
+# 查看预构建的文件
+dir node_modules\.vite\deps\@mc-markets_ui.js
+```
+
+如果文件存在，检查其修改时间应该是最近的。
+
+## 预防措施
+
+### 在 vite.config.js 中配置
+
+```js
+// vite.config.js
+export default defineConfig({
+  optimizeDeps: {
+    // 强制预构建
+    include: ['@mc-markets/ui'],
+    
+    // 或者排除（让 Vite 每次都处理）
+    // exclude: ['@mc-markets/ui']
+  },
+  
+  // 开发时总是强制优化依赖
+  server: {
+    force: true  // 不推荐，会影响性能
+  }
+})
+```
+
+### 使用 npm 包而不是 npm link
+
+如果经常遇到缓存问题，建议：
+
+1. **发布到 npm**：
+```bash
+cd D:\code\npm-mc-markets-ui
+npm publish
+```
+
+2. **在项目中安装**：
+```bash
+cd D:\code\mcmarkets-new
+npm install @mc-markets/ui@latest
+```
+
+### 设置 package.json 脚本
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "dev:clean": "rm -rf node_modules/.vite && vite",
+    "dev:force": "vite --force"
+  }
+}
+```
+
+然后使用：
+```bash
+npm run dev:clean  # 清除缓存后启动
+npm run dev:force  # 强制重新优化
+```
+
+## 常见问题
+
+### Q1: 清除缓存后还是报错
+
+**检查项**：
+1. 确认组件库版本是否正确：`npm list @mc-markets/ui`
+2. 检查 dist 目录是否有最新的构建产物
+3. 尝试完全删除 `node_modules` 重新安装
+
+### Q2: npm link 后总是有问题
+
+**解决方法**：
+```bash
+# 使用 npm pack 打包本地测试
+cd D:\code\npm-mc-markets-ui
+npm pack
+
+# 会生成 mc-markets-ui-1.1.4.tgz
+
+# 在项目中安装本地包
+cd D:\code\mcmarkets-new
+npm install D:\code\npm-mc-markets-ui\mc-markets-ui-1.1.4.tgz
+```
+
+### Q3: 生产构建没问题，开发环境有问题
+
+这是因为：
+- 开发环境使用 Vite 的依赖预构建
+- 生产构建直接使用源代码
+
+**解决方法**：使用方案 1 或 2 清除开发环境缓存
+
+## 完整操作流程（推荐）
+
+```bash
+# === 在组件库目录 ===
+cd D:\code\npm-mc-markets-ui
+
+# 1. 确保最新代码
+git status
+
+# 2. 重新构建
+npm run build
+
+# 3. 验证导出（可选）
+node -e "import('./dist/index.mjs').then(m => console.log('Exports:', Object.keys(m).filter(k => k.startsWith('M')).length, 'components'))"
+
+# === 在项目目录 ===
+cd D:\code\mcmarkets-new
+
+# 4. 清除 Vite 缓存
+Remove-Item -Recurse -Force node_modules\.vite
+
+# 5. 如果使用 npm link，重新链接
+npm unlink @mc-markets/ui
+npm link D:\code\npm-mc-markets-ui
+
+# 6. 强制重启开发服务器
+npm run dev -- --force
+```
+
+## 终极解决方案（如果以上都不行）
+
+```bash
+# 在项目目录
+cd D:\code\mcmarkets-new
+
+# 1. 完全清理
+Remove-Item -Recurse -Force node_modules
+Remove-Item -Force package-lock.json
+
+# 2. 清理缓存
+npm cache clean --force
+
+# 3. 重新安装
+npm install
+
+# 4. 如果使用本地包
+npm install D:\code\npm-mc-markets-ui
+
+# 5. 启动
+npm run dev -- --force
+```
+
+## 成功标志
+
+启动开发服务器后，应该能看到：
+- ✅ 没有报错
+- ✅ 组件正常显示
+- ✅ 浏览器控制台没有错误
+- ✅ Network 标签中可以看到 `@mc-markets_ui.js` 文件被正确加载
+
+## 需要帮助？
+
+如果以上方法都不行，请检查：
+1. 组件库的 `dist/index.d.ts` 是否包含 `MOption` 导出
+2. `package.json` 的 `exports` 配置是否正确
+3. Vite 版本是否过旧（建议 5.0+）
+4. 是否有多个版本的 `@mc-markets/ui` 被安装（检查 `node_modules/@mc-markets/ui`）
+

package/FIX_EXPORT_ISSUE.md

@@ -0,0 +1,166 @@
+# 修复打包错误 - MOption 和 MOptionGroup 导出问题
+
+## 问题描述
+
+在打包时遇到错误：
+```
+import { MOption as __unplugin_components_0 } from '@mc-markets/ui';
+            ^
+```
+
+## 原因
+
+`MOption` 和 `MOptionGroup` 组件虽然已经被导入和注册，但没有在 `packages/index.js` 的导出列表中，导致打包时无法找到这些组件。
+
+## 修复方案
+
+### ✅ 已修复
+
+在 `packages/index.js` 的导出语句中添加了缺失的组件：
+
+```diff
+- export { MIcon, MButton, MInput, MForm, MFormItem, MTooltip, MSelect, MPagination, ... }
++ export { MIcon, MButton, MInput, MForm, MFormItem, MTooltip, MSelect, MOption, MOptionGroup, MPagination, ... }
+```
+
+### 📦 已重新构建
+
+执行了 `npm run build`，生成了新的构建产物：
+- ✅ `dist/index.mjs` - ES 模块
+- ✅ `dist/index.cjs` - CommonJS 模块  
+- ✅ `dist/index.d.ts` - TypeScript 类型定义
+- ✅ `dist/style.css` - 样式文件
+
+### 📋 验证
+
+已验证类型定义文件中包含正确的导出：
+```typescript
+export { 
+  MIcon, MButton, MInput, MForm, MFormItem, MTooltip, 
+  MSelect, MOption, MOptionGroup,  // ✅ 已添加
+  MPagination, MRadio, MRadioGroup, MRadioButton, 
+  MSwitch, MTag, MAlert, MDialog, MNotification, 
+  MMessage, MNotifiMessage, MDatePicker, MEmpty, 
+  MTable, MTableColumn, MBanner, MTabs, MTabPane, 
+  MTabCard, MTabCardItem, MBreadcrumb, 
+  Message, NotifiMessage 
+}
+```
+
+## 下一步操作
+
+### 在你的项目中更新包
+
+```bash
+# 如果是本地开发
+cd your-project
+npm install @mc-markets/ui@latest
+
+# 或者如果是通过 npm link 本地测试
+cd /path/to/npm-mc-markets-ui
+npm link
+
+cd /path/to/your-project
+npm link @mc-markets/ui
+```
+
+### 清除缓存并重新构建
+
+```bash
+# 清除 node_modules 缓存
+rm -rf node_modules/.vite
+
+# 重新构建
+npm run build
+```
+
+### 测试
+
+现在可以正常使用所有组件：
+
+```vue
+<template>
+  <div>
+    <!-- ✅ 所有组件都能正常工作 -->
+    <m-select v-model="value">
+      <m-option label="选项1" value="1" />
+      <m-option label="选项2" value="2" />
+      
+      <m-option-group label="分组">
+        <m-option label="选项3" value="3" />
+      </m-option-group>
+    </m-select>
+    
+    <m-date-picker v-model="date" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// 不需要手动导入，resolver 会自动处理
+
+const value = ref('')
+const date = ref('')
+</script>
+```
+
+## 完整的导出组件列表
+
+现在所有这些组件都可以正确导入：
+
+- ✅ `MIcon`
+- ✅ `MButton`
+- ✅ `MInput`
+- ✅ `MForm`
+- ✅ `MFormItem`
+- ✅ `MTooltip`
+- ✅ `MSelect`
+- ✅ `MOption` ⭐ (已修复)
+- ✅ `MOptionGroup` ⭐ (已修复)
+- ✅ `MPagination`
+- ✅ `MRadio`
+- ✅ `MRadioGroup`
+- ✅ `MRadioButton`
+- ✅ `MSwitch`
+- ✅ `MTag`
+- ✅ `MAlert`
+- ✅ `MDialog`
+- ✅ `MNotification`
+- ✅ `MMessage`
+- ✅ `MNotifiMessage`
+- ✅ `MDatePicker`
+- ✅ `MEmpty`
+- ✅ `MTable`
+- ✅ `MTableColumn`
+- ✅ `MBanner`
+- ✅ `MTabs`
+- ✅ `MTabPane`
+- ✅ `MTabCard`
+- ✅ `MTabCardItem`
+- ✅ `MBreadcrumb`
+
+## 版本更新
+
+- **当前版本**: `1.1.3`
+- **修复内容**: 添加 `MOption` 和 `MOptionGroup` 到导出列表
+
+## 验证修复
+
+运行以下命令验证组件是否正确导出：
+
+```bash
+node -e "import('@mc-markets/ui').then(m => console.log('MOption:', typeof m.MOption, '\nMOptionGroup:', typeof m.MOptionGroup))"
+```
+
+预期输出：
+```
+MOption: function
+MOptionGroup: function
+```
+
+## 相关文档
+
+- [CHANGELOG.md](./CHANGELOG.md) - 完整的变更日志
+- [RESOLVER_USAGE.md](./RESOLVER_USAGE.md) - Resolver 使用指南
+- [STYLE_IMPORT_GUIDE.md](./STYLE_IMPORT_GUIDE.md) - 样式导入指南
+

package/README.md

@@ -69,6 +69,13 @@ export default defineConfig({
 
 📘 详细配置请查看 [Resolver 使用指南](./RESOLVER_USAGE.md)
 
+⚠️ **开发环境提示**：如果遇到 `does not provide an export named 'xxx'` 错误，请清除 Vite 缓存：
+```bash
+# 在你的项目目录运行
+rm -rf node_modules/.vite
+npm run dev -- --force
+```
+
 #### 方式三：手动按需导入
 
 ```vue