DP/tempdocs/JSX加载失败问题分析与解决方案.md

JSX 加载失败问题分析与解决方案

📋 问题描述

在 Shell + Core 架构分离后，Core 应用中的 JSX 脚本无法正常运行，报错：

Error: EvalScript error.

尽管 JSX 文件路径找到了（C:/Users/35780/AppData/Roaming/DesignerCache/v1.0.5/jsx/index.js），但 evalScript 执行失败。

🔍 根本原因

问题1：JSX 构建格式错误

位置：Designer/plugins/buildJsx/index.ts 第 118 行

await bundle.write({
  file: output,
  format: 'cjs'  // ❌ 问题所在！
});

影响：生成的 JSX 文件使用了 CommonJS 格式，包含：

Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./function/index");  // ❌ ExtendScript 不支持 require()
var ActionManager = require("./utils/ActionManager");

问题2：ExtendScript 环境限制

ExtendScript (Adobe JSX 引擎) 不支持：

• ❌ CommonJS 的 require() 和 exports
• ❌ ES6 的 import/export
• ❌ 'use strict' 严格模式

ExtendScript 只支持：

• ✅ 全局函数
• ✅ 立即执行函数表达式 (IIFE)
• ✅ ES3/ES5 语法

✅ 解决方案

方案 1：修改构建配置（长期方案）

修改 Designer/plugins/buildJsx/index.ts：

await bundle.write({
  file: output,
  format: 'iife',  // ✅ 改为 IIFE 格式
  name: 'JSXBundle',
  strict: false  // ✅ 禁用严格模式
});

同时修改 TypeScript 配置：

typescript({
  compilerOptions: {
    target: 'es5',
    strict: false,
    moduleResolution: 'node',
    esModuleInterop: true,
    skipLibCheck: true,
    // ...
  },
  tsconfig: false,
}),

方案 2：临时修复（已应用）

已完成的操作：

1. ✅ 创建了简化版本的 JSX 文件 (index_fixed.js)
2. ✅ 移除了所有 CommonJS 语法
3. ✅ 将依赖项（Logger, ActionManager）内联到单文件中
4. ✅ 备份原文件为 index.js.backup
5. ✅ 替换为修复后的版本

文件位置：

• 修复后：Designer/dist_core/jsx/index.js
• 备份：Designer/dist_core/jsx/index.js.backup

🧪 测试步骤

1. 清除客户端缓存

Remove-Item -Recurse -Force "$env:APPDATA\DesignerCache" -ErrorAction SilentlyContinue

2. 重启插件

在 Photoshop 中：

1. 关闭当前的 DesignerCEP 插件
2. 重新打开插件
3. 登录账号

3. 检查控制台

打开浏览器开发者工具（F12），查看：

预期成功日志：

[__LDX] Detected Core version v1.0.5
[__LDX] Success: C:/Users/35780/AppData/Roaming/DesignerCache/v1.0.5/jsx/index.js
宿主APP名称：Adobe Photoshop 2024

如果仍然失败，查看：

• 是否有 EvalScript error
• ExtendScript 控制台的详细错误信息

4. 测试功能

在插件主界面点击"测试 JSX 调用"按钮，验证：

• ✅ getAppName() 返回 "Adobe Photoshop"
• ✅ createLayer() 可以创建新图层
• ✅ testMergeLayers() 可以合并图层

📝 后续工作

短期（紧急）

• 测试修复后的 JSX 是否正常工作
• 如果测试通过，将修复后的文件上传到服务器

中期（优化）

• 修复构建流程，确保未来构建自动生成正确格式
• 解决 g_logger 和 ActionManager 的依赖打包问题
• 更新 deploy_core.py 脚本，包含 JSX 构建步骤

长期（架构改进）

• 评估是否需要保留完整的 Logger 和 ActionManager
• 考虑使用 Rollup 的 inlineDynamicImports 选项
• 编写自动化测试验证 JSX 在 ExtendScript 环境中的兼容性

🔗 相关文件

文件路径	说明
Designer/plugins/buildJsx/index.ts	JSX 构建配置（已修改format为iife）
Designer/dist_core/jsx/index.js	修复后的 JSX 文件
Designer/dist_core/jsx/index.js.backup	原始的 CommonJS 格式备份
Designer/build_jsx_simple.mjs	简化的构建脚本（待完善）

💡 技术要点

ExtendScript 兼容性清单

✅ 允许:
- var, function, 普通对象
- IIFE: (function(){ ... })();
- 全局赋值: $.global.xxx = function(){}
- ES5 方法: Array.forEach, Object.keys

❌ 禁止:
- 'use strict'
- require() / exports / module.exports
- import / export
- const / let (部分版本不支持)
- Promise / async/await (需 polyfill)
- 箭头函数 (部分版本)

Rollup 输出格式对比

格式	ExtendScript	说明
cjs	❌	CommonJS，使用 require/exports
esm	❌	ES Module，使用 import/export
iife	✅	立即执行函数，所有代码在一个作用域
umd	⚠️	通用模块，体积较大但兼容性好

📞 联系与支持

如果测试中遇到问题，请提供：

1. 浏览器控制台的完整错误日志
2. ExtendScript Toolkit 的错误信息（如果有）
3. Photoshop 版本和操作系统信息

---

报告生成时间：2025-12-16
问题状态：✅ 已修复（待测试验证）