Excalidraw项目开发环境搭建指南

项目概述

Excalidraw是一个开源的虚拟白板工具，允许用户绘制手写风格的图表和图形。本文将详细介绍如何搭建Excalidraw的开发环境，包括本地开发、测试以及Docker部署等多种方式。

在线开发环境

对于想要快速体验Excalidraw开发的用户，可以使用在线代码沙盒环境：

1. 访问在线代码沙盒平台
2. 可能需要登录账号并刷新页面
3. 该环境支持即时编码，甚至可以直接提交代码变更

这种方式无需本地配置，适合快速验证想法或进行小型修改。

本地开发环境搭建

系统要求

在开始本地开发前，请确保系统满足以下要求：

• Node.js运行环境（建议使用LTS版本）
• Yarn包管理器（v1或v2.4.2+版本）
• Git版本控制系统

项目克隆

使用以下命令克隆项目仓库到本地：

git clone 项目仓库地址

依赖安装

进入项目目录后，执行：

yarn

该命令会安装所有必要的开发依赖项。

启动开发服务器

安装完成后，运行：

yarn start

开发服务器将在本地3000端口启动，在浏览器中访问即可看到Excalidraw应用。

协作开发配置

如需进行协作功能开发，需要额外设置协作服务器环境。这部分内容将在专门的协作开发指南中详细介绍。

常用开发命令

代码格式化

Excalidraw使用Prettier进行代码格式化：

yarn fix  # 自动格式化所有文件
yarn test:code  # 检查代码格式是否符合规范

测试相关

yarn test  # 运行测试套件
yarn test:update  # 更新测试快照

Docker开发环境

对于不想配置Node.js环境的开发者，可以使用Docker Compose快速搭建开发环境：

docker-compose up --build -d

这种方式将所有依赖封装在容器中，避免了环境配置的复杂性。

自托管部署

Excalidraw提供了官方Docker镜像，支持多种部署方式：

构建自定义镜像

docker build -t excalidraw/excalidraw .

运行容器

docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest

注意事项：

1. 自托管镜像移除了所有分析跟踪库
2. 当前版本不支持协作功能
3. 团队正在开发完整自托管解决方案

开发建议

1. 对于前端开发者，建议从组件结构入手，Excalidraw采用现代前端架构
2. 图形渲染部分使用了Canvas API，相关代码集中在渲染模块
3. 状态管理采用Redux，熟悉其原理有助于理解应用数据流
4. 测试覆盖率较高，修改功能时请确保相应测试用例同步更新

通过本文介绍的各种方式，开发者可以选择最适合自己的环境进行Excalidraw项目的开发和测试工作。