Initial commit - DesignerCEP Project with Caddy deployment
This commit is contained in:
zuowei1216
193
tempdocs/JSX加载失败问题分析与解决方案.md
Normal file
193
tempdocs/JSX加载失败问题分析与解决方案.md
Normal file
@@ -0,0 +1,193 @@
|
||||
# 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
|
||||
**问题状态**：✅ 已修复（待测试验证）
|
||||
|
||||
Reference in New Issue
Block a user