194 lines
5.0 KiB
Markdown
194 lines
5.0 KiB
Markdown
# 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 行
|
||
|
||
```typescript
|
||
await bundle.write({
|
||
file: output,
|
||
format: 'cjs' // ❌ 问题所在！
|
||
});
|
||
```
|
||
|
||
**影响**：生成的 JSX 文件使用了 **CommonJS 格式**，包含：
|
||
|
||
```javascript
|
||
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`：
|
||
|
||
```typescript
|
||
await bundle.write({
|
||
file: output,
|
||
format: 'iife', // ✅ 改为 IIFE 格式
|
||
name: 'JSXBundle',
|
||
strict: false // ✅ 禁用严格模式
|
||
});
|
||
```
|
||
|
||
**同时修改 TypeScript 配置**：
|
||
|
||
```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. 清除客户端缓存
|
||
|
||
```powershell
|
||
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 兼容性清单
|
||
|
||
```javascript
|
||
✅ 允许:
|
||
- 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
|
||
**问题状态**：✅ 已修复（待测试验证）
|
||
|