Parcel打包后Barba.js页面转场与链接失效问题求助

我来帮你排查并解决这个问题——不用Parcel时一切正常，打包后就失效，控制台还没报错，大概率是Parcel的资源路径处理、依赖加载顺序或者路由配置和Barba.js的工作机制冲突了。下面是具体的分析和解决方案：

一、先确认Parcel的多页面配置是否正确 #

Barba.js需要在多个页面间切换，而Parcel默认如果只指定一个入口文件（比如index.html），可能不会正确处理about.html的打包路径。

解决步骤：

• 修改package.json里的dev脚本，明确指定两个HTML入口：

  "scripts": {
    "dev": "parcel index.html about.html",
    "build": "parcel build index.html about.html"
  }
  

• 重新运行npm run dev，此时Parcel会同时编译两个页面，确保about.html能被正确访问，路径不会被篡改。

二、改用本地依赖替代CDN引入 #

CDN引入的库可能在Parcel打包后出现加载顺序问题，或者和Parcel的模块系统冲突。建议通过npm安装依赖，让Parcel统一管理：

解决步骤：

1. 安装所需依赖：

   npm install @barba/core jquery gsap
   

2. 修改main.js，在顶部引入这些依赖（替换原来的CDN脚本）：

   import $ from 'jquery';
   import barba from '@barba/core';
   import gsap from 'gsap';
   

3. 移除两个HTML文件中的所有CDN脚本标签，只保留<script src="main.js"></script>。

三、确保Barba在DOM完全加载后初始化 #

有时候Parcel打包后，DOM还没完全渲染完成，Barba就开始初始化，导致无法正确识别data-barba属性。

修改main.js：
把Barba的初始化代码包裹在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', () => {
  function delay(n) { 
    n = n || 2000; 
    return new Promise((done) => { 
      setTimeout(() => { done(); }, n); 
    }); 
  }

  function pageTransition() { 
    var tl = gsap.timeline(); 
    tl.to(".loading-screen", { duration: 1.2, width: "100%", left: "0%", ease: "Expo.easeInOut", }); 
    tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "Expo.easeInOut", delay: 0.3, }); 
    tl.set(".loading-screen", {left: "-100%"}); 
  }

  function contentAnimation() { 
    var tl = gsap.timeline(); 
    tl.from(".animate-this", {duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2}); 
  }

  barba.init({ 
    sync: true, 
    transitions: [ 
      { 
        async leave(data) { 
          const done = this.async(); 
          pageTransition(); 
          await delay(1000); 
          done(); 
        }, 
        async enter(data) { 
          contentAnimation(); 
        }, 
        async once(data) { 
          contentAnimation(); 
        }, 
      }, 
    ], 
  });
});

四、检查路径匹配问题 #

Parcel打包后，页面的URL可能会带上.html后缀或者被处理成不同的路径，Barba的路由匹配可能因此失效。可以在Barba的配置里添加debug: true来查看路由日志：

barba.init({
  debug: true, // 添加这行
  sync: true,
  // 其他配置...
});

然后查看控制台的Barba调试信息，确认当前页面的namespace和路径是否正确匹配。如果发现路径不匹配，可以通过Barba的routes配置来手动指定匹配规则。

按以上步骤逐一排查，应该能解决链接和转场失效的问题。

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