多个应用脚本加载顺序冲突导致功能异常
现象#
单独装某个应用正常,和另一个应用一起装就报 $ is not defined 或购物车更新失效。
原因#
- 两个应用都引入不同版本的 jQuery 或同一工具库,后者覆盖前者
- 脚本用
defer与async混用,执行时依赖的 DOM 或全局变量还没就绪 - 都监听
cart:updated类事件但互相stopPropagation - 应用 A 改写
window.fetch,应用 B 的请求被拦截
处理步骤#
- 在 Network 面板按时间排序,确认哪个库先加载、被谁覆盖
- 让两个应用都改用
type="module"或统一defer,避免阻塞顺序不确定 - 在自己的脚本里做能力检测而不是假设全局变量存在
- 定位冲突后联系其中一个应用方改为沙箱式实现,或替换功能重叠的应用
验收标准#
两个应用同时启用时各自功能正常,控制台无全局变量覆盖报错,购物车流程无中断。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。