Photoshop插件安装socket.io-client后require()调用失败求助

问题根源 #

Photoshop UXP的运行环境并非标准Node.js环境，不支持Node.js的require()加载node_modules模块的逻辑，也无法直接识别CommonJS模块结构，因此直接安装后调用require('socket.io-client')会失败。

可行解决方案 #

方案1：使用预构建的UMD格式文件

1. 下载socket.io-client的UMD预构建文件（选择最新稳定版即可），例如socket.io-client.min.js
2. 将该文件复制到插件目录的静态资源文件夹中，比如./assets/lib/
3. 在插件的HTML入口文件中通过<script>标签引入：

   <script src="./assets/lib/socket.io-client.min.js"></script>
   

4. 在你的JS代码中直接使用全局变量io建立连接：

   const socket = io('ws://你的TCP服务器地址');
   

方案2：用Webpack打包成UXP兼容模块

1. 安装Webpack依赖：

   npm install webpack webpack-cli --save-dev
   

2. 在项目根目录创建webpack.config.js，配置如下：

   module.exports = {
     entry: require.resolve('socket.io-client'),
     output: {
       filename: 'socket.io-client.umd.js',
       path: `${__dirname}/assets/lib`,
       library: 'io',
       libraryTarget: 'umd',
       globalObject: 'this'
     }
   };
   

3. 执行打包命令：

   npx webpack --mode production
   

4. 打包完成后，在插件中引入生成的socket.io-client.umd.js文件，后续用法同方案1。

必要配置：添加网络权限 #

在插件的manifest.json中添加网络权限，确保允许连接目标TCP服务器：

"requiredPermissions": {
  "network": {
    "domains": ["你的服务器域名或IP"]
  }
}

内容的提问来源于stack exchange，提问作者Zoey Schlemper