【亲测免费】 Excalidraw 指南：搭建与配置

Excalidraw 是一个用于创建手绘图表和草图的开源工具，基于Web技术实现。以下是一份简要的安装和配置教程。

1. 项目目录结构及介绍

在解压或克隆仓库后，你将看到以下主要的目录结构：

excalidraw/
|-- dist/                # 存放编译后的前端资源
|-- public/               # 包含静态公共文件
|-- src/                  # 项目源代码
|   |-- components/       # UI组件
|   |-- data/              # 数据相关的文件
|   |-- lib/               # 库函数
|   |-- scenes/            # 场景相关逻辑
|   |-- shared/            # 共享组件和函数
|   |-- index.tsx          # 主入口文件
|-- package.json           # 项目依赖和配置
|-- yarn.lock              # 依赖锁定文件
|-- README.md              # 项目简介
|-- .gitignore             # Git 忽略规则
...

2. 项目的启动文件介绍

项目的主要入口文件是 src/index.tsx。它包含了应用的初始化，如设置React App，导入路由以及全局样式设置等。你可以在这里找到如何启动Excalidraw应用程序的基本逻辑。

// ...
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
// ...

此外，package.json 文件中的 scripts 部分定义了项目的脚本命令，比如 start 命令用于本地开发服务器，build 命令用于构建生产环境版本。

3. 项目的配置文件介绍

Excalidraw 使用的是 package.json 和一些内部的JavaScript配置文件来管理其设置。以下是一些关键配置点：

package.json

这是npm项目的标准配置文件，包含了项目信息（如名称、版本）以及可执行的脚本命令。例如：

{
  "name": "excalidraw",
  "version": "0.0.0-development",
  "private": true,
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --watchAll=false",
    // ...
  },
  "dependencies": { /* ... */ },
  "devDependencies": { /* ... */ }
}

.env.* files

项目可能包含不同环境的环境变量文件，例如 .env.development, .env.production 等。这些文件用来存储敏感信息，如API密钥，端口设置等，但默认不被Git追踪。

config-overrides.js

这个文件允许你在不修改项目源码的情况下，对创建React应用时使用的Create React App配置进行覆盖。比如，引入第三方库或修改Webpack配置。

以上是对Excalidraw项目的基本介绍和关键配置文件的概览。如果你需要更详细的开发指南或者特定功能的实现方法，建议查看项目文档或直接阅读源码。