🔧 构建配置优化指南
在神岛地图开发中,创作者经常需要为扩展地图的不同副图配置不同的代码文件。虽然部分代码可以复用,但每个副图可能有其独特的逻辑需求,因此需要为每个副图配置不同的入口文件。
为了解决这一问题,我们开发了构建配置优化功能,允许创作者灵活地配置不同的入口文件和输出文件名。
✨ 功能优势
优势 | 说明 |
---|---|
🔄 灵活性 | 支持为不同副图配置独立的入口文件 |
📋 可维护性 | 清晰的构建配置结构,便于后期维护 |
⚡ 高效性 | 简化构建流程,提高开发效率 |
📝 配置文件数据
在 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.js
或 clientIndex.js
文件中引入对应的构建输出文件即可。这一功能极大地提高了开发过程中的灵活性和效率,使得代码管理更加清晰和有序。

图1: 在编辑器中使用构建输出文件
📌 最佳实践
场景 | 推荐做法 |
---|---|
🗺️ 多副图开发 | 为每个副图创建独立的入口文件,并在配置中定义清晰的文件名称 |
🔄 频繁切换 | 通过调整数组顺序来切换活跃配置,而不是修改配置内容 |
📝 团队协作 | 为每个配置项添加详细的描述信息,便于团队成员理解 |
🔍 调试优化 | 在开发阶段使用 HMR 功能,提高调试效率 |
提示
💡 技巧:创建一个配置模板文件作为参考,可以帮助团队成员快速理解和应用正确的构建配置格式。