DGM.js 项目教程

1. 项目的目录结构及介绍

DGM.js 项目的目录结构如下：

dgmjs/
├── apps/
├── packages/
├── .gitignore
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.base.json
├── tsconfig.json
├── typedoc.base.json
├── typedoc.json

目录结构介绍

• apps/: 存放项目的应用程序代码。
• packages/: 存放项目的包和模块代码。
• .gitignore: Git 忽略文件，指定哪些文件和目录不需要被 Git 跟踪。
• LICENSE.md: 项目的许可证文件，通常包含 GPL-3.0 许可证。
• README.md: 项目的说明文件，包含项目的概述、安装和使用说明。
• package-lock.json: 锁定项目依赖包的版本，确保在不同环境中安装相同的依赖包。
• package.json: 项目的配置文件，包含项目的元数据、依赖包、脚本等信息。
• tsconfig.base.json: TypeScript 的基础配置文件。
• tsconfig.json: TypeScript 的配置文件，用于编译 TypeScript 代码。
• typedoc.base.json: TypeDoc 的基础配置文件，用于生成文档。
• typedoc.json: TypeDoc 的配置文件，用于生成项目的 API 文档。

2. 项目的启动文件介绍

DGM.js 项目的启动文件通常位于 apps/ 目录下，具体文件名可能因项目结构而异。以下是一个典型的启动文件示例：

// apps/main.js

import { initCanvas } from 'dgmjs';

const canvas = document.getElementById('dgm-canvas');
initCanvas(canvas);

启动文件介绍

• main.js: 项目的启动文件，负责初始化画布并加载 DGM.js 的核心功能。
• initCanvas: DGM.js 提供的初始化画布的函数，用于启动项目的核心功能。

3. 项目的配置文件介绍

DGM.js 项目的配置文件主要包括 package.json 和 tsconfig.json。

package.json

package.json 文件包含了项目的元数据、依赖包、脚本等信息。以下是部分关键配置项：

{
  "name": "dgmjs",
  "version": "1.0.0",
  "description": "An infinite canvas with smart shapes",
  "main": "apps/main.js",
  "scripts": {
    "start": "node apps/main.js",
    "build": "tsc",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "typescript": "^4.5.2"
  },
  "devDependencies": {
    "jest": "^27.0.6"
  }
}

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译器的行为。以下是部分关键配置项：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["apps/**/*", "packages/**/*"],
  "exclude": ["node_modules"]
}

配置文件介绍

• package.json: 包含项目的名称、版本、描述、入口文件、脚本命令、依赖包等信息。
• tsconfig.json: 配置 TypeScript 编译器的选项，如目标 ECMAScript 版本、模块系统、严格模式等。

通过以上配置文件，可以确保项目在不同环境中的一致性和可维护性。