Angular项目Jenkins环境引入cypress-drag-drop报Webpack编译错误

• 首先删除webpack.config.prod.js里错误的路径别名配置：@4tw/cypress-drag-drop是Cypress测试侧依赖，仅在测试运行时加载，不需要修改业务代码的生产构建webpack配置。你添加的@4tw别名将npm依赖的scope映射到了本地src目录，会直接导致依赖解析时去本地源码目录找插件文件，必然加载失败，相关配置直接删除即可。
• 检查Jenkins流水线依赖安装逻辑：确认依赖安装命令没有携带--production参数，cypress-drag-drop属于devDependency，生产模式安装会跳过所有开发依赖，直接触发命令不存在的报错。如果流水线有node_modules缓存策略，建议先清理缓存再重新执行全量依赖安装。
• 校验Cypress配置的环境一致性：
  • 确认cypress.config.js（或旧版的cypress.json）中在所有环境下都开启了chromeWebSecurity: false配置，无头CI环境下部分浏览器内核的安全策略会拦截拖拽事件模拟。
  • 确认配置文件里的supportFile路径正确指向你编写了插件注册逻辑的command.js文件，部分Angular项目的Cypress配置会区分本地/CI环境，容易出现CI环境漏加载support文件的问题。
  • 在流水线依赖安装步骤后追加执行npx cypress install，避免CI环境缓存的Cypress二进制文件损坏导致插件加载异常。
• 如果以上配置调整后仍有环境兼容问题，直接弃用第三方拖拽插件，改用Cypress原生事件模拟拖拽逻辑，不存在跨环境兼容问题，可直接全局注册自定义命令使用，参考代码：

// 在cypress/support/command.js中注册自定义拖拽命令
Cypress.Commands.add('customDrag', { prevSubject: 'element' }, (dragEl, dropSelector) => {
  cy.wrap(dragEl).trigger('dragstart', { force: true })
  cy.get(dropSelector)
    .trigger('dragover', { force: true })
    .trigger('drop', { force: true })
  cy.wrap(dragEl).trigger('dragend', { force: true })
})

// 测试用例中调用方式
cy.get('#drag-source').customDrag('#drag-target')

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