如何修改已集成到main-frontend-ui的components-ui并同步变更

常见原因及修复步骤 #

1. 验证Rollup打包是否真正生成了最新代码 #

• 检查components-ui的rollup.config.js，确保配置了正确的输出格式（ES模块/CommonJS，匹配main-frontend-ui的引入方式），且开启了sourcemap（便于排查代码加载问题）。
• 执行yarn rollup后，查看dist文件夹内文件的修改时间，确认打包产物是最新的。

2. 用yarn link替代手动复制dist文件夹 #

手动复制容易出现文件遗漏或缓存残留，用官方链接工具更可靠：

• 在components-ui根目录执行：yarn link
• 在main-frontend-ui根目录执行：yarn link components-ui（替换成components-ui的package.json中name字段的实际值）
• 修改components-ui代码后，执行yarn rollup，main-frontend-ui的开发服务器会自动感知变更（若开启热更新），无需手动复制文件。

3. 清除前端项目的缓存 #

• 执行yarn cache clean清除Yarn全局缓存
• 删除main-frontend-ui目录下的node_modules/.cache文件夹（Webpack/Vite等构建工具的缓存通常存放在这里）
• 重启yarn start:dev，确保加载的是最新组件库代码。

4. 确认组件引入路径的正确性 #

• 检查main-frontend-ui中引入components-ui组件的路径，确保是通过包名引入（而非硬编码的绝对/相对路径），比如：

  // 正确方式（依赖components-ui的package.json主入口配置）
  import { Button } from 'components-ui'
  

5. 开启Rollup监听模式实现实时同步（可选） #

如果需要实时看到修改效果，让Rollup自动监听文件变化并重新打包：

• 在components-ui的package.json中添加脚本：

  "scripts": {
    "rollup:watch": "rollup -c -w"
  }
  

• 执行yarn rollup:watch，之后修改组件代码会自动触发打包，结合yarn link就能实时在main-frontend-ui中看到变更。

内容的提问来源于stack exchange，提问作者Ashmita Singh