Boarding.js 使用教程

Boarding.js 使用教程

boarding.jsA light-weight, no-dependency, vanilla JavaScript engine to create powerful onboardings and drive the user's focus across the page项目地址:https://gitcode.com/gh_mirrors/bo/boarding.js

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

Boarding.js 的目录结构如下：

boarding.js/
├── dist/
│   ├── boarding.js
│   ├── boarding.min.js
│   └── boarding.min.js.map
├── src/
│   ├── core/
│   │   ├── Boarding.ts
│   │   ├── Step.ts
│   │   └── utils.ts
│   ├── index.ts
│   └── types.ts
├── examples/
│   ├── basic-usage.html
│   ├── custom-popover.html
│   └── no-overlay.html
├── package.json
├── tsconfig.json
└── README.md

目录介绍：

• dist/: 包含编译后的 JavaScript 文件，包括压缩版和非压缩版。
• src/: 源代码目录，包含 TypeScript 文件。
  • core/: 核心功能模块，包括 Boarding 类、Step 类和工具函数。
  • index.ts: 入口文件。
  • types.ts: 类型定义文件。
• examples/: 示例文件，展示如何使用 Boarding.js。
• package.json: 项目配置文件，包含依赖、脚本等信息。
• tsconfig.json: TypeScript 配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

Boarding.js 的启动文件是 src/index.ts，该文件导出了 Boarding 类，是整个项目的入口点。

// src/index.ts
export { Boarding } from './core/Boarding';

在使用 Boarding.js 时，通常会通过以下方式引入和初始化：

import Boarding from 'boarding.js';

const boarding = new Boarding();
boarding.highlight('#some-element');

3. 项目的配置文件介绍

Boarding.js 的配置文件主要是 package.json 和 tsconfig.json。

package.json

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

{
  "name": "boarding.js",
  "version": "1.0.0",
  "description": "A light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page",
  "main": "dist/boarding.js",
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "example": "http-server examples"
  },
  "dependencies": {},
  "devDependencies": {
    "typescript": "^4.0.0",
    "http-server": "^0.12.3"
  }
}

tsconfig.json

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

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ]
}

通过这些配置文件，可以方便地进行项目构建和开发。

---

以上是 Boarding.js 项目的目录结构、启动文件和配置文件的介绍。希望这份文档能帮助你更好地理解和使用 Boarding.js。

boarding.jsA light-weight, no-dependency, vanilla JavaScript engine to create powerful onboardings and drive the user's focus across the page项目地址:https://gitcode.com/gh_mirrors/bo/boarding.js