qier-player 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00815/article/details/141214997

qier-player 项目教程

qier-player:clapper: A simple and easy-to-use h5 video player with highly customizable UI and rich features. / 简单易用的h5播放器，UI 高度定制化，功能丰富。项目地址:https://gitcode.com/gh_mirrors/qi/qier-player

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

qier-player 项目的目录结构如下：

qier-player/
├── dist/
│   ├── umd/
│   │   └── index.min.js
├── src/
│   ├── components/
│   ├── styles/
│   ├── index.ts
│   └── types.ts
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
├── yarn.lock

目录结构介绍

dist/：包含编译后的文件，主要是 umd/ 目录下的 index.min.js 文件，用于通过 CDN 引入。
src/：源代码目录，包含组件、样式、入口文件和类型定义。
- components/：存放播放器组件的源代码。
- styles/：存放样式文件。
- index.ts：项目的入口文件。
- types.ts：类型定义文件。
.gitignore：Git 忽略文件配置。
.npmignore：NPM 忽略文件配置。
LICENSE：项目许可证文件。
README.md：项目说明文档。
package.json：项目依赖和脚本配置。
tsconfig.json：TypeScript 配置文件。
yarn.lock：Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，该文件是整个项目的入口点，负责初始化和导出播放器组件。

启动文件内容概述

import Player from './components/Player';

export default Player;

import Player from './components/Player';：导入播放器组件。
export default Player;：导出播放器组件，使其可以被外部引用。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "qier-player",
  "version": "1.0.0",
  "description": "A simple and easy-to-use h5 video player with highly customizable UI and rich features",
  "main": "dist/umd/index.min.js",
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "react": "^17.0.2"
  },
  "devDependencies": {
    "typescript": "^4.1.3"
  },
  "license": "MIT"
}

name：项目名称。
version：项目版本。
description：项目描述。
main：入口文件路径。
scripts：脚本命令，如 build 用于编译项目。
dependencies：生产环境依赖。
devDependencies：开发环境依赖。
license：项目许可证。

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，用于配置 TypeScript 编译选项。

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