GoJS React 项目教程

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

GoJS React 项目的目录结构如下：

gojs-react/
├── .github/
│   └── ISSUE_TEMPLATE/
├── scripts/
├── src/
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── IMPLEMENTATION.md
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.mjs
└── tsconfig.json

目录结构介绍

• .github/ISSUE_TEMPLATE/: 存放 GitHub Issue 模板文件。
• scripts/: 存放项目的脚本文件。
• src/: 存放项目的源代码文件。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略文件配置。
• CHANGELOG.md: 项目更新日志文件。
• IMPLEMENTATION.md: 项目实现细节文档。
• LICENSE.md: 项目许可证文件。
• README.md: 项目介绍和使用说明文档。
• package-lock.json: npm 包锁定文件。
• package.json: npm 包配置文件。
• rollup.config.mjs: Rollup 打包配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

GoJS React 项目的启动文件主要是 src/ 目录下的文件。以下是主要的启动文件及其功能介绍：

• src/ReactDiagram.tsx: 定义了 ReactDiagram 组件，用于管理 GoJS 图表。
• src/ReactPalette.tsx: 定义了 ReactPalette 组件，用于管理 GoJS 调色板。
• src/ReactOverview.tsx: 定义了 ReactOverview 组件，用于管理 GoJS 概览。

这些文件定义了如何在 React 应用中使用 GoJS 图表、调色板和概览组件。

3. 项目的配置文件介绍

package.json

package.json 文件是 npm 包的配置文件，包含了项目的元数据和依赖项。以下是一些关键配置项：

{
  "name": "gojs-react",
  "version": "1.0.0",
  "description": "A set of React components to manage GoJS Diagrams, Palettes, and Overviews",
  "main": "dist/gojsreact.production.min.js",
  "scripts": {
    "build": "rollup -c rollup.config.mjs"
  },
  "dependencies": {
    "gojs": "^2.1.46",
    "react": "^17.0.2"
  },
  "peerDependencies": {
    "gojs": "^2.1.46",
    "react": "^17.0.2"
  }
}

rollup.config.mjs

rollup.config.mjs 文件是 Rollup 打包工具的配置文件，用于将 TypeScript 代码打包成 JavaScript 文件。以下是一些关键配置项：

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/gojsreact.production.min.js',
    format: 'umd',
    name: 'GoJSReact'
  },
  plugins: [
    typescript({ tsconfig: './tsconfig.json' })
  ]
};

tsconfig.json

tsconfig.json 文件是 TypeScript 编译器的配置文件，用于指定 TypeScript 项目的编译选项。以下是一些关键配置项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

通过这些配置文件，GoJS React 项目能够正确地进行打包、编译和运行。