使用 `use-gesture` 开源项目的教程

使用 use-gesture 开源项目的教程

use-gesture👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.项目地址:https://gitcode.com/gh_mirrors/us/use-gesture

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

use-gesture 项目的目录结构如下：

use-gesture/
├── docs/
├── examples/
├── packages/
│   ├── react/
│   ├── vanilla/
│   └── core/
├── scripts/
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

目录介绍

• docs/: 包含项目的文档文件。
• examples/: 包含项目的示例代码。
• packages/: 包含项目的主要代码包，分为 react 和 vanilla 两个子包。
  • react/: 包含适用于 React 的 use-gesture 库。
  • vanilla/: 包含适用于原生 JavaScript 的 use-gesture 库。
  • core/: 包含核心的 use-gesture 逻辑。
• scripts/: 包含项目的脚本文件。
• .gitignore: Git 忽略文件。
• .npmrc: npm 配置文件。
• .prettierrc: Prettier 代码格式化配置文件。
• LICENSE: 项目许可证文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本配置。以下是一些关键的启动脚本：

{
  "scripts": {
    "start": "yarn workspace @use-gesture/react start",
    "build": "yarn workspaces run build",
    "test": "yarn workspaces run test",
    "lint": "yarn workspaces run lint"
  }
}

启动脚本介绍

• start: 启动 React 示例项目。
• build: 构建所有包。
• test: 运行所有包的测试。
• lint: 运行所有包的代码格式检查。

3. 项目的配置文件介绍

tsconfig.json

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

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["packages/**/*"]
}

package.json

package.json 是项目的依赖和脚本配置文件。以下是一些关键配置：

{
  "name": "use-gesture",
  "version": "10.3.1",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "dependencies": {
    "@use-gesture/react": "^10.3.1",
    "@use-gesture/vanilla": "^10.3.1"
  },
  "devDependencies": {
    "typescript": "^4.1.3"
  }
}

.prettierrc

.prettierrc 是 Prettier 代码格式化配置文件。以下是一些关键配置：

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

通过以上配置文件，可以确保项目的代码风格一致，并且能够正确地构建和测试项目。

use-gesture👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.项目地址:https://gitcode.com/gh_mirrors/us/use-gesture