【亲测免费】 Pragmatic Drag and Drop 项目教程

1. 项目目录结构及介绍

pragmatic-drag-and-drop/
├── packages/
│   ├── core/
│   ├── element/
│   ├── drop-indicator/
│   ├── assistive/
│   └── ...
├── patches/
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

目录结构介绍

• packages/: 包含项目的核心包和可选包。每个子目录对应一个功能模块，如 core 是核心包，element 是元素适配器，drop-indicator 是拖放指示器，assistive 是辅助技术控制。
• patches/: 包含项目的补丁文件。
• .gitignore: Git 忽略文件配置。
• CODE_OF_CONDUCT.md: 行为准则文件。
• CONTRIBUTING.md: 贡献指南文件。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明文件。
• jest.config.js: Jest 测试配置文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

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

{
  "scripts": {
    "start": "node index.js",
    "build": "tsc",
    "test": "jest"
  }
}

启动脚本介绍

• start: 启动项目的入口文件 index.js。
• build: 使用 TypeScript 编译项目。
• test: 运行 Jest 测试。

3. 项目的配置文件介绍

package.json

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

{
  "name": "pragmatic-drag-and-drop",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "build": "tsc",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "typescript": "^4.3.5"
  },
  "devDependencies": {
    "jest": "^27.0.6"
  }
}

tsconfig.json

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

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

jest.config.js

jest.config.js 是 Jest 测试框架的配置文件，定义了测试的选项和行为。

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/*.spec.ts'],
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageReporters: ['text', 'lcov'],
};

通过以上配置文件，可以了解项目的依赖管理、编译选项和测试配置。