开源项目 `pointer-tracker` 使用教程

开源项目 pointer-tracker 使用教程

pointer-trackerTrack mouse/touch/pointer events for a given element.项目地址:https://gitcode.com/gh_mirrors/po/pointer-tracker

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

pointer-tracker/
├── demo/
├── dist/
│   ├── PointerTracker.js
│   ├── PointerTracker.mjs
│   └── PointerTracker-min.js
├── lib/
│   └── index.ts
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js
└── tsconfig.json

• demo/: 包含项目的演示代码。
• dist/: 包含编译后的 JavaScript 文件，包括 CommonJS、ES 模块和 UMD 格式的文件。
• lib/: 包含 TypeScript 源代码。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• .prettierignore: 指定 Prettier 格式化工具忽略的文件和目录。
• .prettierrc.json: Prettier 格式化工具的配置文件。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• package-lock.json: 锁定项目依赖的版本。
• package.json: 项目的配置文件，包含依赖、脚本等信息。
• rollup.config.js: Rollup 打包工具的配置文件。
• tsconfig.json: TypeScript 编译器的配置文件。

2. 项目的启动文件介绍

项目的启动文件位于 lib/index.ts，这是 TypeScript 源代码的入口文件。该文件定义了 PointerTracker 类，用于跟踪鼠标、触摸和指针事件。

// lib/index.ts
import { PointerTracker } from 'pointer-tracker';

const pointerTracker = new PointerTracker(element, {
  start(pointerEvent) {
    // 当指针在元素内按下/触摸时调用
  },
  move(previousPointers, changedPointers) {
    // 当指针移动时调用
  },
  end(pointerEvent) {
    // 当指针释放时调用
  }
});

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的元数据和依赖信息。以下是一些关键字段：

{
  "name": "pointer-tracker",
  "version": "1.0.0",
  "description": "Track mouse/touch/pointer events for a given element",
  "main": "dist/PointerTracker.js",
  "module": "dist/PointerTracker.mjs",
  "scripts": {
    "build": "rollup -c",
    "demo": "http-server demo"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  },
  "devDependencies": {
    "rollup": "^2.0.0",
    "typescript": "^4.0.0"
  },
  "license": "Apache-2.0"
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目的入口文件。
• module: ES 模块的入口文件。
• scripts: 包含可执行的脚本命令，如 build 和 demo。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。
• license: 项目许可证。

tsconfig.json

tsconfig.json 文件是 TypeScript 编译器的配置文件，定义了 TypeScript 项目的编译选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "declaration": true
  },
  "include": ["lib"]
}

• compilerOptions: 编译选项。
  • target: 编译目标版本。
  • module: 模块系统。

pointer-trackerTrack mouse/touch/pointer events for a given element.项目地址:https://gitcode.com/gh_mirrors/po/pointer-tracker