Sveltekit Greensock Scrolltrigger 在生产中中断

Question

我有一个 Green Sock 动画，它在开发中运行良好，但在 yarn run preview 和制作中出现问题：ScrollTrigger-4a410f45.js:9 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')。结果是我试图沿路径设置动画的点没有定位在路径上，也没有移动。

import { gsap } from 'gsap';
import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin.js';
 
let reference, path, ico;
onMount(async () => {
   gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
    gsap.timeline({
        defaults: { duration: 1 },
        scrollTrigger: {
            trigger: reference,
            }
        })
    .to(ico, { duration: 0.01, autoAlpha: 1 })
    .to(ico, {motionPath: {path: path, align: path, alignOrigin: [0.5, 0.5]}}, 0);
});

我在本地对此没有任何问题，该错误仅出现在生产版本中。我不确定这是否与我的 Green Sock 代码或我的 Svelte 配置有关。任何提示或解决方案将不胜感激。

Answer 1

事实证明，这与 SvelteKit 或 Vite 处理跨多个组件的 Greensock 导入的方式有关。完整详细信息 here（此答案的所有功劳来自 Blake Bowen post）。

解决方法是将 Greensock 和 Scrolltrigger 导入到脚本中，然后在任何需要的地方引用该脚本。因此，您只需导入 Greensock 库一次，而不是在每个需要它的组件中导入。

gsap.js

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';
import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin.js';

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
}

export * from "gsap";
export { MotionPathPlugin, ScrollTrigger };

然后在组件中只导入脚本：import { gsap, ScrollTrigger } from "../scripts/gsap";

这是一种变通方法，但我认为它实际上更简洁。

Sveltekit Greensock Scrolltrigger 在生产中中断

Sveltekit Greensock Scrolltrigger breaking in production

gsap

svelte

sveltekit