@playcraft/build 0.0.3 → 0.0.8

package/dist/templates/styles.css

@@ -0,0 +1,43 @@
+html {
+    height: 100%;
+    width: 100%;
+    background-color: #1d292c;
+}
+body {
+    margin: 0;
+    max-height: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #1d292c;
+    font-family: Helvetica, arial, sans-serif;
+    position: relative;
+    width: 100%;
+
+    -webkit-tap-highlight-color: transparent;
+}
+
+#application-canvas {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+#application-canvas.fill-mode-NONE {
+    margin: auto;
+}
+#application-canvas.fill-mode-KEEP_ASPECT {
+    width: 100%;
+    height: auto;
+    margin: 0;
+}
+#application-canvas.fill-mode-FILL_WINDOW {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+canvas:focus {
+    outline: none;
+}

package/dist/types.d.ts

@@ -1,5 +1,7 @@
-export type Platform = 'facebook' | 'snapchat' | 'ironsource' | 'applovin' | 'google' | 'tiktok' | 'unity' | 'liftoff' | 'moloco' | 'bigo' | 'inmobi' | 'adikteev' | 'remerge';
+export type Platform = 'playcraft' | 'facebook' | 'snapchat' | 'ironsource' | 'applovin' | 'google' | 'tiktok' | 'unity' | 'liftoff' | 'moloco' | 'bigo' | 'inmobi' | 'adikteev' | 'remerge';
 export type OutputFormat = 'html' | 'zip';
+export type BuildMode = 'classic' | 'esm';
+export type ESMMode = 'auto' | 'enabled' | 'disabled';
 export interface BuildOptions {
     platform: Platform;
     format?: OutputFormat;
@@ -33,6 +35,17 @@ export interface BuildOptions {
     convertToWebP?: boolean;
     compressModels?: boolean;
     modelCompression?: 'draco' | 'meshopt';
+    esmMode?: ESMMode;
+    preserveESM?: boolean;
+    forceIIFE?: boolean;
+}
+export interface BaseBuildMetadata {
+    mode: BuildMode;
+    importMap?: {
+        id: string;
+        imports: Record<string, string>;
+    };
+    entryPoint?: string;
 }
 export interface LocalBuildOptions {
     scriptsConcatenate?: boolean;

package/dist/utils/build-mode-detector.d.ts

@@ -0,0 +1,9 @@
+import type { BaseBuildMetadata } from '../types.js';
+/**
+ * 检测 Base Build 的构建模式
+ */
+export declare function detectBuildMode(baseBuildDir: string): Promise<BaseBuildMetadata>;
+/**
+ * 解析 Import Map 为 Vite resolve.alias
+ */
+export declare function importMapToAlias(importMap: Record<string, string>, baseBuildDir: string): Record<string, string>;

package/dist/utils/build-mode-detector.js

@@ -0,0 +1,42 @@
+import fs from 'fs/promises';
+import path from 'path';
+/**
+ * 检测 Base Build 的构建模式
+ */
+export async function detectBuildMode(baseBuildDir) {
+    // 1. 读取 index.html
+    const indexPath = path.join(baseBuildDir, 'index.html');
+    const html = await fs.readFile(indexPath, 'utf-8');
+    // 2. 检测 import map
+    const hasImportMap = html.includes('<script type="importmap">');
+    if (hasImportMap) {
+        // ESM 模式
+        const importMapMatch = html.match(/<script type="importmap">\s*(\{[\s\S]*?\})\s*<\/script>/);
+        const importMapContent = importMapMatch ? JSON.parse(importMapMatch[1]) : { imports: {} };
+        return {
+            mode: 'esm',
+            importMap: {
+                id: 'detected',
+                imports: importMapContent.imports || {},
+            },
+            entryPoint: 'js/index.mjs',
+        };
+    }
+    // Classic 模式
+    return {
+        mode: 'classic',
+    };
+}
+/**
+ * 解析 Import Map 为 Vite resolve.alias
+ */
+export function importMapToAlias(importMap, baseBuildDir) {
+    const alias = {};
+    for (const [key, value] of Object.entries(importMap)) {
+        // 移除尾部斜杠
+        const cleanKey = key.replace(/\/$/, '');
+        const cleanValue = value.replace(/^\.\//, '');
+        alias[cleanKey] = path.resolve(baseBuildDir, cleanValue);
+    }
+    return alias;
+}

package/dist/vite/config-builder.d.ts

@@ -4,8 +4,36 @@ export declare class ViteConfigBuilder {
     private baseBuildDir;
     private platform;
     private options;
+    private baseBuildMetadata?;
+    private esmBundledScript;
+    private finalOutputDir;
+    private viteOutputDir;
     constructor(baseBuildDir: string, platform: Platform, options: BuildOptions);
-    create(): UserConfig;
+    create(): Promise<UserConfig>;
+    /**
+     * 获取 Vite 的临时输出目录
+     */
+    getViteOutputDir(): string;
+    /**
+     * 获取最终输出目录
+     */
+    getFinalOutputDir(): string;
+    /**
+     * 判断是否需要转换为 IIFE
+     */
+    private shouldConvertToIIFE;
+    /**
+     * 创建 ESM 打包配置（将 ESM 转为 IIFE）
+     *
+     * 策略：使用 index.html 作为入口，ESM 脚本已经预先打包到 this.esmBundledScript
+     */
+    private createESMBundleConfig;
+    /**
+     * 创建传统配置（Classic 模式或保留 ESM）
+     */
+    private createClassicConfig;
+    private createLogger;
+    private createRollupWarnHandler;
     private getPlatformConfig;
     private shouldMinifyCSS;
     private shouldMinifyJS;

package/dist/vite/config-builder.js

@@ -6,37 +6,158 @@ import viteImagemin from '@vheemstra/vite-plugin-imagemin';
 import imageminMozjpeg from 'imagemin-mozjpeg';
 import imageminPngquant from 'imagemin-pngquant';
 import imageminWebp from 'imagemin-webp';
-import { visualizer } from 'rollup-plugin-visualizer';
 import { PLATFORM_CONFIGS } from './platform-configs.js';
 import { vitePlayCanvasPlugin } from './plugin-playcanvas.js';
 import { vitePlatformPlugin } from './plugin-platform.js';
 import { viteModelCompressionPlugin } from './plugin-model-compression.js';
+import { viteESMBundlePlugin, bundleESMToIIFE } from './plugin-esm-html-generator.js';
 import { createPlatformAdapter } from '../platforms/index.js';
+import { detectBuildMode, importMapToAlias } from '../utils/build-mode-detector.js';
 export class ViteConfigBuilder {
     constructor(baseBuildDir, platform, options) {
         this.baseBuildDir = baseBuildDir;
         this.platform = platform;
         this.options = options;
+        this.esmBundledScript = ''; // 预先打包的 ESM 脚本
+        this.finalOutputDir = ''; // 用户指定的最终输出目录
+        this.viteOutputDir = ''; // Vite 的临时输出目录（在 root 下）
     }
-    create() {
+    async create() {
+        // 1. 检测 Base Build 模式
+        this.baseBuildMetadata = await detectBuildMode(this.baseBuildDir);
+        console.log(`[ViteConfigBuilder] 检测到构建模式: ${this.baseBuildMetadata.mode}`);
+        // 2. 决定最终输出格式
+        const shouldConvertToIIFE = this.shouldConvertToIIFE();
+        console.log(`[ViteConfigBuilder] 转换为 IIFE: ${shouldConvertToIIFE}`);
         const platformConfig = this.getPlatformConfig();
         const outputDir = this.options.outputDir || './dist';
         const playableOptions = this.getPlayableOptions(platformConfig);
         const rootDir = fs.realpathSync(this.baseBuildDir);
-        const logger = createLogger();
-        const customLogger = {
-            ...logger,
-            warn(msg, options) {
-                if (typeof msg === 'string' && msg.includes('can\'t be bundled without type="module"')) {
-                    return;
-                }
-                logger.warn(msg, options);
+        // 为了避免 Vite build-html 插件的路径问题，使用相对于 root 的输出目录
+        // 注意：必须使用相对路径字符串，不能用绝对路径
+        const viteOutputDir = '__dist__'; // 相对于 root 的路径
+        const viteOutputDirAbsolute = path.join(rootDir, viteOutputDir);
+        // 确保用户的 outputDir 是绝对路径（用于后续复制）
+        const finalOutputDir = path.isAbsolute(outputDir)
+            ? outputDir
+            : path.resolve(process.cwd(), outputDir);
+        // 保存最终输出目录，供 ViteBuilder 使用
+        this.finalOutputDir = finalOutputDir;
+        this.viteOutputDir = viteOutputDirAbsolute;
+        console.log(`[ViteConfigBuilder] 路径配置:`);
+        console.log(`  - root: ${rootDir}`);
+        console.log(`  - viteOutputDir (相对): ${viteOutputDir}`);
+        console.log(`  - viteOutputDir (绝对): ${viteOutputDirAbsolute}`);
+        console.log(`  - finalOutputDir: ${finalOutputDir}`);
+        // 3. 如果需要，预先打包 ESM 脚本（在主 Vite 构建之前）
+        if (this.baseBuildMetadata.mode === 'esm' && shouldConvertToIIFE) {
+            this.esmBundledScript = await bundleESMToIIFE({
+                baseBuildDir: this.baseBuildDir,
+                outputDir: viteOutputDirAbsolute,
+                minify: platformConfig.minifyJS,
+            });
+            return this.createESMBundleConfig(platformConfig, viteOutputDir, playableOptions, rootDir);
+        }
+        else {
+            return this.createClassicConfig(platformConfig, viteOutputDir, playableOptions, rootDir);
+        }
+    }
+    /**
+     * 获取 Vite 的临时输出目录
+     */
+    getViteOutputDir() {
+        return this.viteOutputDir || '';
+    }
+    /**
+     * 获取最终输出目录
+     */
+    getFinalOutputDir() {
+        return this.finalOutputDir || '';
+    }
+    /**
+     * 判断是否需要转换为 IIFE
+     */
+    shouldConvertToIIFE() {
+        // 1. 处理 esmMode 选项（优先）
+        const esmMode = this.options.esmMode || 'auto';
+        if (esmMode === 'disabled') {
+            return true; // 用户强制禁用 ESM，转换为 IIFE
+        }
+        if (esmMode === 'enabled') {
+            return false; // 用户强制启用 ESM，保留原生格式
+        }
+        // 2. 向后兼容旧的 API（如果设置了这些选项）
+        if (this.options.forceIIFE)
+            return true;
+        if (this.options.preserveESM)
+            return false;
+        // 3. 自动模式（默认）：根据项目和平台特性决定
+        // 如果是 Classic 模式，不需要转换
+        if (this.baseBuildMetadata?.mode === 'classic') {
+            return false;
+        }
+        // 根据平台配置决定
+        const platformConfig = PLATFORM_CONFIGS[this.platform];
+        const esmSupport = platformConfig.esmSupport;
+        if (!esmSupport || !esmSupport.enabled) {
+            return true; // 平台不支持 ESM，必须转换
+        }
+        return esmSupport.preferIIFE ?? true; // 默认转换为 IIFE（更安全）
+    }
+    /**
+     * 创建 ESM 打包配置（将 ESM 转为 IIFE）
+     *
+     * 策略：使用 index.html 作为入口，ESM 脚本已经预先打包到 this.esmBundledScript
+     */
+    createESMBundleConfig(platformConfig, outputDir, playableOptions, rootDir) {
+        const logger = this.createLogger();
+        const metadata = this.baseBuildMetadata;
+        console.log(`[ViteConfigBuilder] ESM Bundle 配置:`);
+        console.log(`  - root: ${rootDir}`);
+        console.log(`  - outDir: ${outputDir}`);
+        return defineConfig({
+            root: rootDir,
+            base: './',
+            customLogger: logger,
+            resolve: {
+                // 将 Import Map 转换为 Vite alias
+                alias: metadata.importMap
+                    ? importMapToAlias(metadata.importMap.imports, rootDir)
+                    : {},
             },
-        };
+            build: {
+                outDir: outputDir,
+                emptyOutDir: true,
+                cssMinify: this.shouldMinifyCSS(platformConfig) ? 'lightningcss' : false,
+                minify: this.shouldMinifyJS(platformConfig) ? 'terser' : false,
+                terserOptions: {
+                    compress: {
+                        drop_console: true,
+                        drop_debugger: true,
+                    },
+                },
+                assetsInlineLimit: Infinity,
+                sourcemap: platformConfig.includeSourcemap,
+                rollupOptions: {
+                    // 不设置 input，让 Vite 自动从 root 目录发现 index.html
+                    onwarn: this.createRollupWarnHandler(),
+                },
+            },
+            plugins: this.createPlugins(platformConfig, outputDir, playableOptions, true),
+        });
+    }
+    /**
+     * 创建传统配置（Classic 模式或保留 ESM）
+     */
+    createClassicConfig(platformConfig, outputDir, playableOptions, rootDir) {
+        const logger = this.createLogger();
+        console.log(`[ViteConfigBuilder] Classic 配置:`);
+        console.log(`  - root: ${rootDir}`);
+        console.log(`  - outDir: ${outputDir}`);
         return defineConfig({
             root: rootDir,
             base: './',
-            customLogger,
+            customLogger: logger,
             build: {
                 outDir: outputDir,
                 emptyOutDir: true,
@@ -55,21 +176,34 @@ export class ViteConfigBuilder {
                 // 不生成 sourcemap（Playable Ads 不需要）
                 sourcemap: platformConfig.includeSourcemap,
                 rollupOptions: {
-                    input: {
-                        main: path.join(rootDir, 'index.html'),
-                    },
-                    onwarn(warning, warn) {
-                        const message = typeof warning === 'string' ? warning : warning.message;
-                        if (message && message.includes('can\'t be bundled without type="module"')) {
-                            return;
-                        }
-                        warn(warning);
-                    },
+                    // 不设置 input，让 Vite 自动从 root 目录发现 index.html
+                    onwarn: this.createRollupWarnHandler(),
                 },
             },
-            plugins: this.createPlugins(platformConfig, outputDir, playableOptions),
+            plugins: this.createPlugins(platformConfig, outputDir, playableOptions, false),
         });
     }
+    createLogger() {
+        const logger = createLogger();
+        return {
+            ...logger,
+            warn(msg, options) {
+                if (typeof msg === 'string' && msg.includes('can\'t be bundled without type="module"')) {
+                    return;
+                }
+                logger.warn(msg, options);
+            },
+        };
+    }
+    createRollupWarnHandler() {
+        return (warning, warn) => {
+            const message = typeof warning === 'string' ? warning : warning.message;
+            if (message && message.includes('can\'t be bundled without type="module"')) {
+                return;
+            }
+            warn(warning);
+        };
+    }
     getPlatformConfig() {
         const baseConfig = PLATFORM_CONFIGS[this.platform];
         const resolvedOutputFormat = this.options.format ?? baseConfig.outputFormat;
@@ -93,11 +227,18 @@ export class ViteConfigBuilder {
     shouldMinifyJS(config) {
         return config.minifyJS;
     }
-    createPlugins(platformConfig, outputDir, playableOptions) {
+    createPlugins(platformConfig, outputDir, playableOptions, isESMBundle = false) {
         const plugins = [];
-        // 1. PlayCanvas 资源转换插件（最先执行）
+        // 0. ESM Bundle 插件（如果是 ESM 模式且需要转换为 IIFE）
+        // ESM 脚本已经预先打包到 this.esmBundledScript
+        if (isESMBundle && this.baseBuildMetadata?.mode === 'esm' && this.esmBundledScript) {
+            plugins.push(viteESMBundlePlugin(this.esmBundledScript));
+        }
+        // 1. PlayCanvas 资源转换插件
         plugins.push(vitePlayCanvasPlugin({
             baseBuildDir: this.baseBuildDir,
+            buildMode: this.baseBuildMetadata?.mode || 'classic',
+            isESMBundle: isESMBundle,
             inlineScripts: true,
             convertDataUrls: platformConfig.outputFormat === 'html',
             outputFormat: playableOptions.outputFormat,
@@ -110,10 +251,12 @@ export class ViteConfigBuilder {
         }));
         // 2. 平台特定插件
         const platformAdapter = createPlatformAdapter(this.options);
+        // 注意：outputDir 需要使用绝对路径，因为 copyBaseBuildAssets 需要绝对路径
+        const absoluteOutputDir = this.viteOutputDir || path.resolve(this.baseBuildDir, outputDir);
         plugins.push(vitePlatformPlugin({
             platform: this.platform,
             adapter: platformAdapter,
-            outputDir: outputDir,
+            outputDir: absoluteOutputDir,
             baseBuildDir: this.baseBuildDir,
             outputFormat: platformConfig.outputFormat,
             externFiles: playableOptions.externFiles,
@@ -163,19 +306,6 @@ export class ViteConfigBuilder {
                 removeViteModuleLoader: true,
             }));
         }
-        // 6. 打包分析报告
-        if (this.options.analyze) {
-            const reportPath = this.options.analyzeReportPath
-                ? this.options.analyzeReportPath
-                : path.join(outputDir, 'bundle-report.html');
-            plugins.push(visualizer({
-                filename: reportPath,
-                template: 'treemap',
-                gzipSize: true,
-                brotliSize: true,
-                open: false,
-            }));
-        }
         return plugins.filter(Boolean);
     }
     getPlayableOptions(config) {

package/dist/vite/platform-configs.d.ts

@@ -22,6 +22,10 @@ export interface PlatformViteConfig {
         method?: 'draco' | 'meshopt';
         quality?: number;
     };
+    esmSupport?: {
+        enabled: boolean;
+        preferIIFE?: boolean;
+    };
     playable?: {
         patchXhrOut?: boolean;
         inlineGameScripts?: boolean;