使用 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
}
通过以上配置文件,可以确保项目的代码风格一致,并且能够正确地构建和测试项目。