Vite项目中如何引入修改后的本地Excalidraw克隆作为依赖？

问题根源 #

报错是因为Excalidraw内部依赖路径未正确解析，不管用本地路径还是GitHub仓库作为依赖，都得先确保Excalidraw包本身已完成正确构建，且依赖安装完整。

具体修复步骤 #

1. 先处理克隆的Excalidraw项目 #

• 进入你克隆的Excalidraw仓库根目录，执行以下命令完成依赖安装与构建：

  npm install
  npm run build:packages
  

  这一步会构建Excalidraw的各个子包，确保roughjs这类依赖的路径能被正确识别。

2. 本地路径依赖的正确配置 #

• 在Vite主项目的package.json中，添加本地Excalidraw包的路径，注意要指向构建后的packages/excalidraw目录，而非仓库根目录：

  "dependencies": {
    "excalidraw": "file:../path-to-your-cloned-excalidraw/packages/excalidraw"
  }
  

• 执行npm install后，重启Vite开发服务。

3. GitHub Fork仓库的正确配置 #

• 确保你Fork的仓库已提交构建产物（Excalidraw默认.gitignore会忽略构建文件，需临时移除相关规则，提交packages/excalidraw/dist等构建文件后再推送到GitHub）。
• 在主项目的package.json中添加依赖：

  "dependencies": {
    "excalidraw": "github:your-github-username/excalidraw#branch-name"
  }
  

• 执行npm install并重启Vite服务。

额外处理方案 #

如果仍出现路径解析问题，在Vite主项目的vite.config.js中添加别名配置，手动映射roughjs路径：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'roughjs/bin/rough': 'roughjs/dist/rough.esm.js'
    }
  }
});

内容的提问来源于stack exchange，提问作者John Robinson