Graphin 开源项目教程

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

Graphin 是一个基于 G6 的 React 图可视化工具包。以下是其主要目录结构及其介绍：

/antvis/Graphin
├── docs                  # 项目文档
├── examples              # 示例代码
├── packages
│   ├── graphin           # 核心库
│   │   ├── src
│   │   │   ├── components # 组件目录
│   │   │   ├── layouts    # 布局目录
│   │   │   ├── utils      # 工具函数目录
│   │   │   ├── index.ts   # 入口文件
│   │   ├── package.json   # 包配置文件
│   ├── graphin-components # 附加组件库
│   ├── graphin-icons     # 图标库
├── scripts               # 构建脚本
├── .gitignore            # Git忽略配置
├── .npmignore            # NPM忽略配置
├── .prettierrc           # 代码格式化配置
├── lerna.json            # Lerna多包管理配置
├── package.json          # 项目根配置文件
├── README.md             # 项目说明文档

2. 项目的启动文件介绍

Graphin 项目的启动文件位于 packages/graphin/src/index.ts。该文件是整个项目的入口点，负责导出所有核心功能和组件。

// packages/graphin/src/index.ts
export { default as Graphin } from './components/Graphin';
export { default as Utils } from './utils';
export { default as Layouts } from './layouts';
// 其他导出

3. 项目的配置文件介绍

package.json

package.json 文件位于项目根目录，包含了项目的基本信息、依赖包、脚本命令等。

{
  "name": "@antv/graphin",
  "version": "1.0.0",
  "description": "A React toolkit for graph visualization based on G6",
  "main": "lib/index.js",
  "module": "es/index.js",
  "scripts": {
    "start": "lerna run start --stream",
    "build": "lerna run build --stream",
    "test": "lerna run test --stream"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "g6": "^4.3.4"
  },
  "devDependencies": {
    "typescript": "^4.2.3",
    "lerna": "^4.0.0"
  }
}

lerna.json

lerna.json 文件用于配置 Lerna 多包管理工具。

{
  "packages": [
    "packages/*"
  ],
  "version": "1.0.0"
}

.prettierrc

.prettierrc 文件用于配置代码格式化规则。

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

通过以上配置文件，可以确保项目的一致性和可维护性。