开源项目 `egjs-flicking` 使用教程

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

egjs-flicking 项目的目录结构如下：

egjs-flicking/
├── docs/
├── examples/
├── packages/
│   ├── @egjs/flicking/
│   ├── @egjs/flicking-plugins/
│   ├── @egjs/ngx-flicking/
│   ├── @egjs/react-flicking/
│   ├── @egjs/vue-flicking/
│   ├── @egjs/vue3-flicking/
│   ├── @egjs/preact-flicking/
│   └── @egjs/svelte-flicking/
├── scripts/
├── src/
├── test/
├── .gitignore
├── .npmignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍：

• docs/: 存放项目的文档文件，包括API文档、使用指南等。
• examples/: 存放项目的示例代码，展示如何使用 egjs-flicking。
• packages/: 存放各个框架的 flicking 实现，如 @egjs/ngx-flicking、@egjs/react-flicking 等。
• scripts/: 存放项目的脚本文件，用于构建、测试等。
• src/: 存放项目的源代码。
• test/: 存放项目的测试代码。
• .gitignore: Git 忽略文件列表。
• .npmignore: npm 忽略文件列表。
• .prettierrc: Prettier 配置文件。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证文件。
• package.json: 项目的 npm 配置文件，包含依赖、脚本等信息。
• README.md: 项目的介绍文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

egjs-flicking 项目的启动文件主要集中在 packages/ 目录下，每个框架的启动文件略有不同。以下是一些常见的启动文件：

@egjs/flicking/

• index.ts: 项目的入口文件，导出主要的类和方法。
• Flicking.ts: Flicking 类的主要实现文件。

@egjs/react-flicking/

• index.ts: 项目的入口文件，导出 React 组件。
• Flicking.tsx: Flicking 组件的主要实现文件。

@egjs/vue-flicking/

• index.ts: 项目的入口文件，导出 Vue 组件。
• Flicking.vue: Flicking 组件的主要实现文件。

3. 项目的配置文件介绍

egjs-flicking 项目的配置文件主要包括以下几个：

package.json

package.json 是项目的 npm 配置文件，包含项目的依赖、脚本、版本等信息。以下是一些关键配置项：

{
  "name": "@egjs/flicking",
  "version": "4.11.4",
  "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
  "main": "dist/flicking.js",
  "module": "dist/flicking.esm.js",
  "types": "dist/flicking.d.ts",
  "scripts": {
    "build": "rollup -c",
    "test": "jest",
    "lint": "eslint src test"
  },
  "dependencies": {
    "@egjs/component": "^3.0.0",
    "@egjs/list-differ": "^1.0.0"
  },
  "devDependencies": {
    "@types/jest": "^26.0.0",
    "eslint": "^7.0.0",
    "jest": "^26.0.0",
    "rollup": "^2.0.0"
  }
}

tsconfig.json

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

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

.prettierrc

.prettierrc 是 Prettier 的配置文件，用于配置代码格式化选项。以下是一些关键配置项：

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

通过以上配置文件，可以了解项目的构建、测试、代码格式化等方面的配置。