Skip to content

🔧 构建配置优化指南

在神岛地图开发中,创作者经常需要为扩展地图的不同副图配置不同的代码文件。虽然部分代码可以复用,但每个副图可能有其独特的逻辑需求,因此需要为每个副图配置不同的入口文件。

为了解决这一问题,我们开发了构建配置优化功能,允许创作者灵活地配置不同的入口文件和输出文件名。

✨ 功能优势

优势说明
🔄 灵活性支持为不同副图配置独立的入口文件
📋 可维护性清晰的构建配置结构,便于后期维护
⚡ 高效性简化构建流程,提高开发效率

📝 配置文件数据

dao3.config.json 文件中,有一个 outputAndUpdate 属性,它是一个数组,支持填写多个对象或字符串。

🔍 使用数组的好处

优势说明
📊 灵活性数组结构允许我们配置多个输出文件数据,为不同的构建需求提供存储空间
🔄 可替换性每次构建时,系统只会读取数组的第一项数据,便于创作者在需要时快速替换构建配置

提示

💡 提示:对数组顺序进行调整是切换不同构建配置的最简单方法。将需要使用的配置放在数组的第一位即可。

📋 支持的格式

json
{
  "ArenaPro": {
    "file": {
      "outputAndUpdate": [
        "bundle.js", // 字符串格式,指定输出文件名称。构建时读取数组第一项作为当前构建的数据。【HMR编译不会读取字符串格式】
        {
          // 对象格式,可同时配置输出文件名称、文件入口、服务端入口、客户端入口及描述信息。
          "name": "bundle2.js", // 输出文件名称
          "serverEntry": "src/App2.ts", // 服务端入口文件
          "clientEntry": "src/clientApp2.ts", // 客户端入口文件
          "description": "第二个代码模块示例,可根据实际需求更改。" // 描述信息
        }
      ]
      // 其他配置...
    }
  }
}

🚀 完整编译构建效果

📘 配置示例一

json
{
  "ArenaPro": {
    "file": {
      "outputAndUpdate": [
        "bundle.js",
        {
          "name": "bundle2.js",
          "serverEntry": "src/App2.ts",
          "clientEntry": "src/clientApp2.ts",
          "description": "第二个代码模块示例,可根据实际需求更改。"
        }
      ]
      // 其他配置...
    }
  }
}

📤 构建输出:

在此配置下,构建输出的文件名称为 _server_bundle.js_client_bundle.js,并会上传到神岛编辑器中。

📙 配置示例二

json
{
  "ArenaPro": {
    "file": {
      "outputAndUpdate": [
        {
          "name": "bundle2.js",
          "serverEntry": "src/App2.ts",
          "clientEntry": "src/clientApp2.ts",
          "description": "第二个代码模块示例,可根据实际需求更改。"
        },
        "bundle.js"
      ]
      // 其他配置...
    }
  }
}

📤 构建输出:

在此配置下,服务端入口文件变为 src/App2.ts,客户端入口文件变为 src/clientApp2.ts,因此构建输出的文件名称为 _server_bundle2.js_client_bundle2.js,并会上传到神岛编辑器中。

🔥 HMR 编译构建效果

📚 详细说明:请参考 代码分离(多入口文件) 章节了解更多关于热模块替换(HMR)编译构建的信息。

警告

⚠️ 注意:HMR 编译不会读取字符串格式的配置,只会处理对象格式的配置项。确保在使用 HMR 功能时,您的配置采用对象格式。

📋 使用说明

最后,创作者只需在不同副图下的 index.jsclientIndex.js 文件中引入对应的构建输出文件即可。这一功能极大地提高了开发过程中的灵活性和效率,使得代码管理更加清晰和有序。

构建配置使用示例

图1: 在编辑器中使用构建输出文件

📌 最佳实践

场景推荐做法
🗺️ 多副图开发为每个副图创建独立的入口文件,并在配置中定义清晰的文件名称
🔄 频繁切换通过调整数组顺序来切换活跃配置,而不是修改配置内容
📝 团队协作为每个配置项添加详细的描述信息,便于团队成员理解
🔍 调试优化在开发阶段使用 HMR 功能,提高调试效率

提示

💡 技巧:创建一个配置模板文件作为参考,可以帮助团队成员快速理解和应用正确的构建配置格式。