Heat.js 项目教程

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

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

Heat.js/
├── docs/
│   └── images/
│       └── icon.png
├── src/
│   ├── components/
│   ├── styles/
│   └── index.ts
├── tests/
├── .gitignore
├── .npmignore
├── package.json
├── README.md
├── tsconfig.json
└── tsup.config.ts

目录结构介绍

• docs/: 包含项目文档和相关图片，如项目图标。
• src/: 项目的主要源代码目录，包含组件、样式和入口文件。
• tests/: 包含项目的测试文件。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• .npmignore: 指定 npm 发布时忽略的文件和目录。
• package.json: 项目的配置文件，包含依赖、脚本等信息。
• README.md: 项目的说明文档。
• tsconfig.json: TypeScript 配置文件。
• tsup.config.ts: 构建工具 tsup 的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是整个项目的入口点。该文件负责初始化项目并加载必要的组件和样式。

// src/index.ts
import './styles/main.css';
import { initHeatMap } from './components/heatMap';

document.addEventListener('DOMContentLoaded', () => {
  initHeatMap();
});

启动文件介绍

• 导入样式: 导入项目的主要样式文件 main.css。
• 初始化热图: 调用 initHeatMap 函数初始化热图组件。

3. 项目的配置文件介绍

package.json

package.json 是项目的配置文件，包含项目的基本信息、依赖和脚本等。

{
  "name": "heat.js",
  "version": "4.2.0",
  "description": "A lightweight JavaScript library that generates customizable heat maps charts and statistics to visualize date-based activity and trends",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsup",
    "test": "jest"
  },
  "dependencies": {
    "typescript": "^4.0.0"
  },
  "devDependencies": {
    "tsup": "^5.0.0",
    "jest": "^27.0.0"
  }
}

tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

tsup.config.ts

tsup.config.ts 是构建工具 tsup 的配置文件，用于配置项目的构建选项。

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  splitting: false,
  sourcemap: true,
  clean: true,
  dts: true
});

以上是 Heat.js 项目的目录结构、启动文件和配置文件的详细介绍。希望这份教程能帮助你更好地理解和使用该项目。