如何在Sapper/Svelte中使用JavaScript库？静态导出场景window访问问题

嘿，这个问题我之前帮不少开发者捋清楚过——Sapper的服务端渲染（SSR）特性确实会让依赖window的前端库有点“水土不服”，尤其是导出静态站的时候，下面给你几个按优先级排序的最优处理方案：

onMount是Svelte专属的生命周期钩子，只会在客户端执行，服务端渲染阶段完全不会碰它，所以在这里面访问window、操作DOM绝对安全。不管是GSAP还是Conversational Form，都适合放在这里初始化：

<script>
  import { onMount } from 'svelte';
  // 如果是npm安装的库，可以先导入
  import gsap from 'gsap';

  onMount(() => {
    // 初始化GSAP动画
    gsap.to('.animate-me', { x: 200, duration: 1.2 });

    // 初始化Conversational Form（如果它挂载在window上）
    new window.ConversationalForm({
      formEl: document.getElementById('chat-form'),
      // 你的其他配置项
      submitCallback: (formData) => console.log(formData)
    });
  });
</script>

<div class="animate-me">我会动起来</div>
<form id="chat-form">
  <!-- 表单元素 -->
</form>

如果你的库体积较大，或者本身不支持SSR，可以用动态导入的方式，确保代码只在客户端加载执行，还能顺便做代码分割：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    // 动态导入GSAP，只有客户端会加载这个模块
    const { gsap } = await import('gsap');
    gsap.from('.fade-in', { opacity: 0, duration: 0.8 });

    // 如果Conversational Form是npm包，也可以这么导入
    const { ConversationalForm } = await import('conversational-form');
    new ConversationalForm({
      formEl: document.getElementById('chat-form')
    });
  });
</script>

Sapper会在客户端自动设置process.browser为true，服务端则为false，可以用这个条件包裹依赖window的代码。不过要注意：不要在组件顶层直接写依赖window的逻辑，最好和onMount配合使用，避免服务端渲染时触发错误：

<script>
  import { onMount } from 'svelte';
  import gsap from 'gsap';

  onMount(() => {
    if (process.browser) {
      // 确保只在客户端执行
      gsap.to('.element', { scale: 1.2, duration: 0.5 });
    }
  });
</script>

如果你的库需要全局生效（比如全站都要用GSAP的动画），可以直接在Sapper的客户端入口文件client.js里初始化——这个文件只会在客户端运行，完全不用担心服务端的window问题：

// src/client.js
import * as sapper from '@sapper/app';
import gsap from 'gsap';

// 把GSAP挂载到window上，方便组件里直接调用
window.gsap = gsap;

// 页面加载完成后初始化Conversational Form
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('global-chat-form');
  if (form) {
    new window.ConversationalForm({ formEl: form });
  }
});

sapper.start({
  target: document.querySelector('#sapper'),
});

额外注意点 #

• 对于Conversational Form这类依赖DOM的库，一定要确保目标元素已经挂载到DOM上再初始化（onMount和DOMContentLoaded都能保证这一点），否则会出现找不到元素的错误。
• 导出静态站时，执行npm run export后，生成的静态文件会包含所有客户端代码，这些初始化逻辑都会正常触发。

内容的提问来源于stack exchange，提问作者Jonas K.