Photo Sphere Viewer部署与发布：从开发到生产的完整流程

Photo Sphere Viewer部署与发布：从开发到生产的完整流程

【免费下载链接】Photo-Sphere-ViewerA JavaScript library to display 360° sphere panoramas.项目地址: https://gitcode.com/gh_mirrors/ph/Photo-Sphere-Viewer

Photo Sphere Viewer 是一款功能强大的 JavaScript 库，专为展示 360° 球形全景图而设计。本指南将带您了解从开发环境搭建到生产环境部署的完整流程，帮助您快速掌握这款全景图展示工具的使用方法。

1. 开发环境准备

1.1 系统要求

在开始之前，请确保您的开发环境满足以下要求：

• Node.js 22 或更高版本
• npm 或 yarn 包管理器

1.2 获取项目代码

首先，克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/ph/Photo-Sphere-Viewer cd Photo-Sphere-Viewer

1.3 安装依赖

使用 npm 或 yarn 安装项目依赖：

npm install # 或 yarn install

2. 开发与调试

2.1 启动开发服务器

项目使用 Turborepo 作为构建工具，启动开发服务器：

npm run serve

这将启动一个热重载的开发环境，您可以在浏览器中访问http://localhost:8080查看效果。

2.2 运行示例

项目提供了丰富的示例，您可以在examples/目录下找到各种使用场景的演示。例如，基础全景图展示：

图：Photo Sphere Viewer基础全景图展示效果

2.3 自定义导航栏

您可以根据需要自定义导航栏，添加或修改控制按钮。导航栏位于全景图底部，包含缩放、移动等控制功能：

图：Photo Sphere Viewer导航栏控制界面

3. 构建项目

3.1 构建所有包

当开发完成后，使用以下命令构建所有包：

npm run build

这将使用 tsup 工具构建项目，生成的文件位于各包的dist/目录下。

3.2 构建文档

项目文档使用 VitePress 和 TypeDoc 构建，执行以下命令生成文档：

npm run doc:build

生成的文档位于public/api/目录下，您可以通过浏览器打开public/api/index.html查看。

4. 测试与质量保证

4.1 运行单元测试

项目使用 Mocha 进行单元测试，执行以下命令运行测试：

npm run test

4.2 运行端到端测试

使用 Cypress 进行端到端测试，启动 Cypress 测试 runner：

npm run e2e:open

您可以在测试界面中选择要运行的测试用例，确保全景图展示功能正常。

图：Cypress端到端测试界面

5. 生产环境部署

5.1 准备部署文件

构建完成后，您可以在各包的dist/目录下找到生产环境所需的文件。核心库位于packages/core/dist/目录。

5.2 集成到您的项目

您可以通过以下方式将 Photo Sphere Viewer 集成到您的项目中：

5.2.1 使用 npm 安装

npm install @photo-sphere-viewer/core

5.2.2 直接引入脚本

在 HTML 文件中直接引入构建好的脚本：

<script src="path/to/photo-sphere-viewer.min.js"></script> <link rel="stylesheet" href="path/to/photo-sphere-viewer.css">

5.3 添加全景图描述

您可以为全景图添加描述信息，增强用户体验：

图：带有描述信息的全景图展示效果

5.4 截图功能

Photo Sphere Viewer 提供了截图功能，用户可以保存当前全景图视角：

图：全景图截图功能演示

6. 发布与版本管理

6.1 版本更新

项目使用 npm workspace 进行版本管理，更新版本：

npm version --workspace packages --workspaces-update false

6.2 发布到 npm

执行以下命令将包发布到 npm：

npm run ci:publish

7. 总结

通过本指南，您已经了解了 Photo Sphere Viewer 从开发到部署的完整流程。无论是本地开发调试，还是生产环境部署，都可以按照上述步骤操作。如果您需要更多帮助，可以查阅项目文档或示例代码，开始您的全景图展示之旅吧！

【免费下载链接】Photo-Sphere-ViewerA JavaScript library to display 360° sphere panoramas.项目地址: https://gitcode.com/gh_mirrors/ph/Photo-Sphere-Viewer