📦 创建神岛组件库项目
在 ArenaPro 插件中，创作者不仅可以打造独特的地图项目，还能够创建神岛组件库。该平台专为存放和分享可复用的代码组件而设计，这些组件能够被其他创作者轻松导入和应用，极大地提升了开发效率与代码复用性。
🚀 创建流程概览
| 阶段 | 主要任务 |
|---|---|
| 🏗️ 项目初始化 | 创建项目目录、命名并配置基础结构 |
| ⚙️ 环境配置 | 设置开发环境、导入到代码编辑器 |
| 🔧 项目创建 | 使用 Arena-Ts 脚手架初始化组件库项目 |
| 🧪 验证测试 | 构建项目并确认设置正确 |
🏗️ 项目初始化
1️⃣ 创建项目目录
- 在文件系统中新建一个空文件夹，作为神岛组件库项目的根目录。
图1: 创建新的空文件夹
- 为文件夹命名：
| 命名类型 | 示例 |
|---|---|
| 项目名称 | Arena 智能输出 |
| 英文名 | arena-rich |
图2: 为项目文件夹命名
警告
⚠️ 命名规范：为确保项目顺利编译，请务必使用纯英文命名，避免使用非法字符、中文及空格。推荐使用小写字母加连字符的命名方式（kebab-case），如 arena-rich。
⚙️ 配置开发环境
2️⃣ 导入项目到编辑器
- 打开 VSCode 编辑器
- 通过以下路径导入项目：
文件(File)->打开文件夹(Open Folder)-> 选择项目文件夹
图3: 在 VSCode 中打开文件夹
导入后，项目结构应如下所示：
图4: 导入后的初始项目结构
🔧 创建 Arena-Ts 项目
3️⃣ 使用脚手架初始化项目
| 操作 | 说明 |
|---|---|
| 调出命令面板 | • Windows/Linux: 按下 F1 或 Shift+Ctrl+P• Mac: 按下 Shift+Cmd+P |
| 选择创建命令 | • 输入 arena-ts• 选择 新建Arena-Ts项目(Create new Arena-Ts Project) |
图5: 使用命令面板创建新项目
4️⃣ 项目配置
- 脚手架将引导完成项目创建
- 当被问及项目类型时，请务必选择神岛组件库
图6: 选择"神岛组件库"作为项目类型
- 按
Enter键确认 - 脚手架将自动创建文件并配置
package.json
图7: 配置 package.json 信息
- 安装项目依赖
图8: 安装项目依赖过程
5️⃣ 完成安装
当终端显示如下信息时，表示项目已成功安装：
图9: 项目依赖安装成功提示
提示
💡 疑难解决：若在安装过程中遇到问题，请参考：NodeJS 部署 Arena-Ts 问题解决方案
图10: Arena-Ts 项目创建成功
🧪 项目验证
6️⃣ 构建项目
- 点击编辑器左下角的
完整构建项目按钮 - 若构建成功，终端将显示如下提示信息：
图11: 项目构建成功提示
📋 项目结构说明
7️⃣ 与神岛地图项目的区别
🔍 主要差异： 虽然神岛组件库项目与神岛地图项目在结构上相似，但有以下几个重要区别：
| 区别点 | 详细说明 |
|---|---|
| 📄 代码分离 | • 组件库项目不能同时包含客户端和服务端代码 • package.json 中的 main 字段将自动配置为指定的脚本入口• types 字段指向类型提示文件• files 字段仅包含打包后的代码 |
| ⚡ 构建优化 | • dao3.config.json 中的 npmPackage 属性用于指定构建端• 自动停止构建另一端以优化速度 |
| 📚 文档支持 | • 自动生成 npm 包所需的 README.md 模板• 更加注重项目描述和使用说明 |
🔄 端类型切换
8️⃣ 后期如何更换端
若你需要在后期更换项目的类型（例如从服务端切换到客户端），只需打开 package.json 文件，并点击右上角的设置按钮进行快速切换。
图12: 通过设置按钮切换项目类型
提示
💡 工作原理：切换类型时，系统会根据配置的 dao3.config.json 文件来判断入口，并自动进行相应调整，无需手动修改复杂配置。
📈 发布流程
完成组件库开发后，你可以将其发布到 npm 注册表，使其可被其他神岛地图项目导入使用。
| 步骤 | 说明 |
|---|---|
| 1. 准备发布 | 确保 package.json 中的版本号、描述等信息正确 |
| 2. 构建项目 | 使用 ArenaPro 插件的构建功能，生成发布包 |
| 3. 发布包 | 使用 npm publish 命令发布到 npm 注册表 |
| 4. 验证发布 | 通过 npm view <package-name> 确认发布成功 |