Journey.js 开源项目教程

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

Journey.js 的目录结构清晰，便于理解和使用。以下是主要的目录和文件介绍：

Journey.js/
├── src/
│   ├── core/
│   │   ├── index.ts
│   │   ├── tour.ts
│   │   └── step.ts
│   ├── ui/
│   │   ├── dialog.ts
│   │   ├── tooltip.ts
│   │   └── progress.ts
│   ├── utils/
│   │   ├── helpers.ts
│   │   └── constants.ts
│   ├── index.ts
│   └── styles.css
├── dist/
│   ├── journey.js
│   └── journey.min.js
├── examples/
│   ├── basic.html
│   ├── advanced.html
│   └── custom.html
├── package.json
├── tsconfig.json
└── README.md

• src/：包含项目的源代码，主要分为 core、ui 和 utils 三个子目录。
  • core/：核心功能模块，包括 index.ts、tour.ts 和 step.ts。
  • ui/：用户界面模块，包括 dialog.ts、tooltip.ts 和 progress.ts。
  • utils/：工具函数和常量，包括 helpers.ts 和 constants.ts。
  • index.ts：项目的入口文件。
  • styles.css：项目的样式文件。
• dist/：编译后的文件，包括 journey.js 和 journey.min.js。
• examples/：示例文件，包括 basic.html、advanced.html 和 custom.html。
• package.json：项目的配置文件，包含依赖和脚本。
• tsconfig.json：TypeScript 的配置文件。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是整个 Journey.js 库的入口点。这个文件主要负责初始化库并导出必要的模块和函数。

import { Tour } from './core/tour';
import { Step } from './core/step';
import './styles.css';

export { Tour, Step };

• Tour 和 Step 是核心模块，分别代表一个导览和导览中的步骤。
• styles.css 是项目的样式文件，确保导览的外观和感觉。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 tsconfig.json。

package.json

package.json 文件包含了项目的元数据和依赖项，以及一些脚本命令。

{
  "name": "journey.js",
  "version": "2.1.0",
  "description": "A powerful, customizable and accessible guided tour creator",
  "main": "dist/journey.js",
  "scripts": {
    "build": "tsc",
    "start": "tsc -w",
    "test": "jest"
  },
  "dependencies": {
    "typescript": "^4.0.0"
  },
  "devDependencies": {
    "@types/jest": "^26.0.0",
    "jest": "^26.0.0",
    "ts-jest": "^26.0.0"
  },
  "author": "William Troup",
  "license": "MIT"
}

• name、version 和 description 描述了项目的名称、版本和描述。
• main 指定了项目的入口文件。
• scripts 定义了一些常用的脚本命令，如 build、start 和 test。
• dependencies 和 devDependencies 列出了项目所需的依赖项。

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和文件包含规则。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",