fix(build): 修复 Web 构建组件注册和用户脚本打包问题 (#302)
* refactor(build): 重构 Web 构建管线，支持配置驱动的 Import Maps - 重构 WebBuildPipeline 支持 split-bundles 和 single-bundle 两种构建模式 - 使用 module.json 的 isCore 字段识别核心模块，消除硬编码列表 - 动态生成 Import Map，从模块清单的 name 字段获取包名映射 - 动态扫描 module.json 文件，不再依赖固定模块列表 - 添加 HTTP 服务器启动脚本 (start-server.bat/sh) 支持 ESM 模块 - 更新 BuildSettingsPanel UI 支持新的构建模式选项 - 添加多语言支持 (zh/en/es) * fix(build): 修复 Web 构建组件注册和用户脚本打包问题 主要修复: - 修复组件反序列化时找不到类型的问题 - @ECSComponent 装饰器现在自动注册到 ComponentRegistry - 添加未使用装饰器的组件警告 - 构建管线自动扫描用户脚本（无需入口文件） 架构改进: - 解决 Decorators ↔ ComponentRegistry 循环依赖 - 新建 ComponentTypeUtils.ts 作为底层无依赖模块 - 移除冗余的防御性 register 调用 - 统一 ComponentType 定义位置 * refactor(build): 统一 WASM 配置架构，移除硬编码 - 新增 wasmConfig 统一配置替代 wasmPaths/wasmBindings - wasmConfig.files 支持多候选源路径和明确目标路径 - wasmConfig.runtimePath 指定运行时加载路径 - 重构 _copyWasmFiles 使用统一配置 - HTML 生成使用配置中的 runtimePath - 移除 physics-rapier2d 的冗余 WASM 配置（由 rapier2d 负责） - IBuildFileSystem 新增 deleteFile 方法 * feat(build): 单文件构建模式完善和场景配置驱动 ## 主要改动 ### 单文件构建（single-file mode） - 修复 WASM 初始化问题，支持 initSync 同步初始化 - 配置驱动的 WASM 识别，通过 wasmConfig.isEngineCore 标识核心引擎模块 - 从 wasmConfig.files 动态获取 JS 绑定路径，消除硬编码 ### 场景配置 - 构建验证：必须选择至少一个场景才能构建 - 自动扫描：项目加载时扫描 scenes 目录 - 抽取 _filterScenesByWhitelist 公共方法统一过滤逻辑 ### 构建面板优化 - availableScenes prop 传递场景列表 - 场景复选框可点击切换启用状态 - 移除动态 import，使用 prop 传入数据 * chore(build): 补充构建相关的辅助改动 - 添加 BuildFileSystemService 的 listFilesByExtension 优化 - 更新 module.json 添加 externalDependencies 配置 - BrowserRuntime 支持 wasmModule 参数传递 - GameRuntime 添加 loadSceneFromData 方法 - Rust 构建命令更新 - 国际化文案更新 * feat(build): 持久化构建设置到项目配置 ## 设计架构 ### ProjectService 扩展 - 新增 BuildSettingsConfig 接口定义构建配置字段 - ProjectConfig 添加 buildSettings 字段 - 新增 getBuildSettings / updateBuildSettings 方法 ### BuildSettingsPanel - 组件挂载时从 projectService 加载已保存配置 - 设置变化时自动保存（500ms 防抖） - 场景选择状态与项目配置同步 ### 配置保存位置 保存在项目的 ecs-editor.config.json 中： - scenes: 选中的场景列表 - buildMode: 构建模式 - companyName/productName/version: 产品信息 - developmentBuild/sourceMap: 构建选项 * fix(editor): Ctrl+S 仅在主编辑区域触发保存场景 - 模态窗口打开时跳过（构建设置、设置、关于等） - 焦点在 input/textarea/contenteditable 时跳过 * fix(tests): 修复 ECS 测试中 Component 注册问题 - 为所有测试 Component 类添加 @ECSComponent 装饰器 - 移除 beforeEach 中的 ComponentRegistry.reset() 调用 - 将内联 Component 类移到文件顶层以支持装饰器 - 更新测试预期值匹配新的组件类型名称 - 添加缺失的 HierarchyComponent 导入 所有 1388 个测试现已通过。
This commit is contained in:
YHH
GitHub
@@ -11,9 +11,9 @@ import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import {
|
||||
Monitor, Apple, Smartphone, Globe, Server, Gamepad2,
|
||||
Plus, Minus, ChevronDown, ChevronRight, Settings,
|
||||
Package, Loader2, CheckCircle, XCircle, AlertTriangle, X
|
||||
Package, Loader2, CheckCircle, XCircle, AlertTriangle, X, Copy, Check
|
||||
} from 'lucide-react';
|
||||
import type { BuildService, BuildProgress, BuildConfig, WebBuildConfig, WeChatBuildConfig, SceneManagerService } from '@esengine/editor-core';
|
||||
import type { BuildService, BuildProgress, BuildConfig, WebBuildConfig, WeChatBuildConfig, SceneManagerService, ProjectService, BuildSettingsConfig } from '@esengine/editor-core';
|
||||
import { BuildPlatform, BuildStatus } from '@esengine/editor-core';
|
||||
import { useLocale } from '../hooks/useLocale';
|
||||
import '../styles/BuildSettingsPanel.css';
|
||||
@@ -63,7 +63,8 @@ interface BuildSettings {
|
||||
developmentBuild: boolean;
|
||||
sourceMap: boolean;
|
||||
compressionMethod: 'Default' | 'LZ4' | 'LZ4HC';
|
||||
bundleModules: boolean;
|
||||
/** Web build mode | Web 构建模式 */
|
||||
buildMode: 'split-bundles' | 'single-bundle' | 'single-file';
|
||||
}
|
||||
|
||||
// ==================== Constants | 常量 ====================
|
||||
@@ -87,7 +88,7 @@ const DEFAULT_SETTINGS: BuildSettings = {
|
||||
developmentBuild: false,
|
||||
sourceMap: false,
|
||||
compressionMethod: 'Default',
|
||||
bundleModules: false,
|
||||
buildMode: 'split-bundles',
|
||||
};
|
||||
|
||||
// ==================== Status Key Mapping | 状态键映射 ====================
|
||||
@@ -105,12 +106,85 @@ const buildStatusKeys: Record<BuildStatus, string> = {
|
||||
[BuildStatus.Cancelled]: 'buildSettings.cancelled'
|
||||
};
|
||||
|
||||
// ==================== Build Error Display Component | 构建错误显示组件 ====================
|
||||
|
||||
/**
|
||||
* Format and display build errors in a readable way.
|
||||
* 以可读的方式格式化和显示构建错误。
|
||||
*/
|
||||
function BuildErrorDisplay({ error }: { error: string }) {
|
||||
const { t } = useLocale();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Extract first line as summary | 提取第一行作为摘要
|
||||
const lines = error.split('\n');
|
||||
const firstErrorMatch = error.match(/X \[ERROR\][^\n]*/);
|
||||
const firstLine = lines[0] || '';
|
||||
const matchedError = firstErrorMatch?.[0] || '';
|
||||
const summary = matchedError
|
||||
? matchedError.slice(0, 100) + (matchedError.length > 100 ? '...' : '')
|
||||
: firstLine.slice(0, 100) + (firstLine.length > 100 ? '...' : '');
|
||||
|
||||
// Check if error is long (needs expansion) | 检查错误是否很长（需要展开）
|
||||
const isLongError = error.length > 200 || lines.length > 3;
|
||||
|
||||
// Copy error to clipboard | 复制错误到剪贴板
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(error);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (e) {
|
||||
console.error('Failed to copy:', e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="build-result-error">
|
||||
<div className="build-error-header">
|
||||
<AlertTriangle size={16} />
|
||||
<span className="build-error-summary">{summary}</span>
|
||||
<button
|
||||
className="build-error-copy-btn"
|
||||
onClick={handleCopy}
|
||||
title={t('buildSettings.copyError')}
|
||||
>
|
||||
{copied ? <Check size={14} /> : <Copy size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLongError && (
|
||||
<>
|
||||
<button
|
||||
className="build-error-expand-btn"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{isExpanded ? t('buildSettings.collapse') : t('buildSettings.showDetails')}
|
||||
<ChevronDown
|
||||
size={14}
|
||||
className={isExpanded ? 'rotated' : ''}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<pre className="build-error-details">{error}</pre>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ==================== Props | 属性 ====================
|
||||
|
||||
interface BuildSettingsPanelProps {
|
||||
projectPath?: string;
|
||||
buildService?: BuildService;
|
||||
sceneManager?: SceneManagerService;
|
||||
projectService?: ProjectService;
|
||||
/** Available scenes in the project | 项目中可用的场景列表 */
|
||||
availableScenes?: string[];
|
||||
onBuild?: (profile: BuildProfile, settings: BuildSettings) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
@@ -121,6 +195,8 @@ export function BuildSettingsPanel({
|
||||
projectPath,
|
||||
buildService,
|
||||
sceneManager,
|
||||
projectService,
|
||||
availableScenes,
|
||||
onBuild,
|
||||
onClose
|
||||
}: BuildSettingsPanelProps) {
|
||||
@@ -232,9 +308,11 @@ export function BuildSettingsPanel({
|
||||
const webConfig: WebBuildConfig = {
|
||||
...baseConfig,
|
||||
platform: BuildPlatform.Web,
|
||||
format: 'iife',
|
||||
bundleModules: settings.bundleModules,
|
||||
generateHtml: true
|
||||
buildMode: settings.buildMode,
|
||||
generateHtml: true,
|
||||
minify: !settings.developmentBuild,
|
||||
generateAssetCatalog: true,
|
||||
assetLoadingStrategy: 'on-demand'
|
||||
};
|
||||
buildConfig = webConfig;
|
||||
} else if (platform === BuildPlatform.WeChatMiniGame) {
|
||||
@@ -280,6 +358,78 @@ export function BuildSettingsPanel({
|
||||
}
|
||||
}, [selectedProfile, settings, projectPath, buildService, onBuild, getPlatformEnum]);
|
||||
|
||||
// Load saved build settings from project config
|
||||
// 从项目配置加载已保存的构建设置
|
||||
useEffect(() => {
|
||||
if (!projectService) return;
|
||||
|
||||
const savedSettings = projectService.getBuildSettings();
|
||||
if (savedSettings) {
|
||||
setSettings(prev => ({
|
||||
...prev,
|
||||
scriptingDefines: savedSettings.scriptingDefines || [],
|
||||
companyName: savedSettings.companyName || prev.companyName,
|
||||
productName: savedSettings.productName || prev.productName,
|
||||
version: savedSettings.version || prev.version,
|
||||
developmentBuild: savedSettings.developmentBuild ?? prev.developmentBuild,
|
||||
sourceMap: savedSettings.sourceMap ?? prev.sourceMap,
|
||||
compressionMethod: savedSettings.compressionMethod || prev.compressionMethod,
|
||||
buildMode: savedSettings.buildMode || prev.buildMode
|
||||
}));
|
||||
}
|
||||
}, [projectService]);
|
||||
|
||||
// Initialize scenes from availableScenes prop and saved settings
|
||||
// 从 availableScenes prop 和已保存设置初始化场景列表
|
||||
useEffect(() => {
|
||||
if (availableScenes && availableScenes.length > 0) {
|
||||
const savedSettings = projectService?.getBuildSettings();
|
||||
const savedScenes = savedSettings?.scenes || [];
|
||||
|
||||
setSettings(prev => ({
|
||||
...prev,
|
||||
scenes: availableScenes.map(path => ({
|
||||
path,
|
||||
enabled: savedScenes.length > 0 ? savedScenes.includes(path) : true
|
||||
}))
|
||||
}));
|
||||
}
|
||||
}, [availableScenes, projectService]);
|
||||
|
||||
// Auto-save build settings when changed
|
||||
// 设置变化时自动保存
|
||||
const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
useEffect(() => {
|
||||
if (!projectService) return;
|
||||
|
||||
// Debounce save to avoid too many writes
|
||||
// 防抖保存，避免频繁写入
|
||||
if (saveTimeoutRef.current) {
|
||||
clearTimeout(saveTimeoutRef.current);
|
||||
}
|
||||
|
||||
saveTimeoutRef.current = setTimeout(() => {
|
||||
const configToSave: BuildSettingsConfig = {
|
||||
scenes: settings.scenes.filter(s => s.enabled).map(s => s.path),
|
||||
scriptingDefines: settings.scriptingDefines,
|
||||
companyName: settings.companyName,
|
||||
productName: settings.productName,
|
||||
version: settings.version,
|
||||
developmentBuild: settings.developmentBuild,
|
||||
sourceMap: settings.sourceMap,
|
||||
compressionMethod: settings.compressionMethod,
|
||||
buildMode: settings.buildMode
|
||||
};
|
||||
projectService.updateBuildSettings(configToSave);
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
if (saveTimeoutRef.current) {
|
||||
clearTimeout(saveTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, [settings, projectService]);
|
||||
|
||||
// Monitor build progress from service | 从服务监控构建进度
|
||||
useEffect(() => {
|
||||
if (!buildService || !isBuilding) {
|
||||
@@ -475,11 +625,24 @@ export function BuildSettingsPanel({
|
||||
<div className="build-settings-field-content">
|
||||
<div className="build-settings-scene-list">
|
||||
{settings.scenes.length === 0 ? (
|
||||
<div className="build-settings-empty-list"></div>
|
||||
<div className="build-settings-empty-list">
|
||||
{t('buildSettings.noScenesFound')}
|
||||
</div>
|
||||
) : (
|
||||
settings.scenes.map((scene, index) => (
|
||||
<div key={index} className="build-settings-scene-item">
|
||||
<input type="checkbox" checked={scene.enabled} readOnly />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={scene.enabled}
|
||||
onChange={e => {
|
||||
setSettings(prev => ({
|
||||
...prev,
|
||||
scenes: prev.scenes.map((s, i) =>
|
||||
i === index ? { ...s, enabled: e.target.checked } : s
|
||||
)
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<span>{scene.path}</span>
|
||||
</div>
|
||||
))
|
||||
@@ -582,18 +745,25 @@ export function BuildSettingsPanel({
|
||||
</select>
|
||||
</div>
|
||||
<div className="build-settings-form-row">
|
||||
<label>{t('buildSettings.bundleModules')}</label>
|
||||
<label>{t('buildSettings.buildMode')}</label>
|
||||
<div className="build-settings-toggle-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.bundleModules}
|
||||
<select
|
||||
value={settings.buildMode}
|
||||
onChange={e => setSettings(prev => ({
|
||||
...prev,
|
||||
bundleModules: e.target.checked
|
||||
buildMode: e.target.value as 'split-bundles' | 'single-bundle' | 'single-file'
|
||||
}))}
|
||||
/>
|
||||
>
|
||||
<option value="split-bundles">{t('buildSettings.splitBundles')}</option>
|
||||
<option value="single-bundle">{t('buildSettings.singleBundle')}</option>
|
||||
<option value="single-file">{t('buildSettings.singleFile')}</option>
|
||||
</select>
|
||||
<span className="build-settings-hint">
|
||||
{settings.bundleModules ? t('buildSettings.bundleModulesHint') : t('buildSettings.separateModulesHint')}
|
||||
{settings.buildMode === 'split-bundles'
|
||||
? t('buildSettings.splitBundlesHint')
|
||||
: settings.buildMode === 'single-bundle'
|
||||
? t('buildSettings.singleBundleHint')
|
||||
: t('buildSettings.singleFileHint')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -749,10 +919,7 @@ export function BuildSettingsPanel({
|
||||
|
||||
{/* Error Message | 错误消息 */}
|
||||
{buildResult.error && (
|
||||
<div className="build-result-error">
|
||||
<AlertTriangle size={16} />
|
||||
<span>{buildResult.error}</span>
|
||||
</div>
|
||||
<BuildErrorDisplay error={buildResult.error} />
|
||||
)}
|
||||
|
||||
{/* Warnings | 警告 */}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
import { X } from 'lucide-react';
|
||||
import type { BuildService, SceneManagerService } from '@esengine/editor-core';
|
||||
import type { BuildService, SceneManagerService, ProjectService } from '@esengine/editor-core';
|
||||
import { BuildSettingsPanel } from './BuildSettingsPanel';
|
||||
import { useLocale } from '../hooks/useLocale';
|
||||
import '../styles/BuildSettingsWindow.css';
|
||||
@@ -16,6 +16,9 @@ interface BuildSettingsWindowProps {
|
||||
projectPath?: string;
|
||||
buildService?: BuildService;
|
||||
sceneManager?: SceneManagerService;
|
||||
projectService?: ProjectService;
|
||||
/** Available scenes in the project | 项目中可用的场景列表 */
|
||||
availableScenes?: string[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
@@ -23,6 +26,8 @@ export function BuildSettingsWindow({
|
||||
projectPath,
|
||||
buildService,
|
||||
sceneManager,
|
||||
projectService,
|
||||
availableScenes,
|
||||
onClose
|
||||
}: BuildSettingsWindowProps) {
|
||||
const { t } = useLocale();
|
||||
@@ -45,6 +50,8 @@ export function BuildSettingsWindow({
|
||||
projectPath={projectPath}
|
||||
buildService={buildService}
|
||||
sceneManager={sceneManager}
|
||||
projectService={projectService}
|
||||
availableScenes={availableScenes}
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user