如何在SvelteKit中扩展P5JS的Vector类

核心问题原因 #

1. p5.js是浏览器端库，SvelteKit默认服务端渲染，直接导入p5会因window未定义报错。
2. p5的Vector类并非直接导出的独立模块，而是绑定在p5实例上的构造函数，全局/直接导入的方式无法获取其值类型。
3. 仅导入type { Vector }只能用于类型注解，不能作为类进行继承。

解决方案1：在Sketch内部定义Node类 #

利用sketch回调中提供的p5实例，直接使用p5.Vector作为父类，此时p5已在浏览器环境初始化：

<script lang="ts">
    import P5 from "p5-svelte";
    import type { Sketch } from "p5-svelte";
    import type { Vector } from "p5";

    let width = 55;
    let height = 55;

    const sketch: Sketch = (p5) => {
        // 在sketch内部定义Node类，直接使用p5.Vector
        class Node extends p5.Vector {
            constructor(x: number, y: number) {
                super(x, y);
                // 注：super已经初始化x/y，这里无需重复赋值
            }
        }

        p5.setup = () => {
            p5.createCanvas(400, 400);
            const myNode = new Node(100, 100);
            console.log(myNode.x, myNode.y); // 输出100 100
        };

        p5.draw = () => {
            p5.ellipse(p5.width / 2, p5.height / 2, width, height);
        };
    };
</script>

<P5 {sketch} />

解决方案2：在Sketch外部定义Node类（客户端仅执行） #

如果需要在sketch外复用Node类，需确保代码仅在浏览器端运行，可通过以下方式：

1. 禁用当前页面的服务端渲染：

<script lang="ts">
    export const ssr = false; // 强制页面仅在客户端渲染

    import P5 from "p5-svelte";
    import type { Sketch } from "p5-svelte";
    import type { Vector } from "p5";

    let width = 55;
    let height = 55;
    let VectorConstructor: typeof Vector; // 保存Vector构造函数

    const sketch: Sketch = (p5) => {
        VectorConstructor = p5.Vector; // 从实例中获取Vector构造函数

        p5.setup = () => {
            p5.createCanvas(400, 400);
        };

        p5.draw = () => {
            p5.ellipse(p5.width / 2, p5.height / 2, width, height);
        };
    };

    // 确保VectorConstructor初始化后再定义Node类
    let Node: typeof Vector;
    if (typeof window !== "undefined") {
        Node = class extends VectorConstructor {
            constructor(x: number, y: number) {
                super(x, y);
            }
        };
    }
</script>

<P5 {sketch} />

2. 或者将Node类封装为客户端组件，使用client:only指令加载。

关键注意事项 #

• 不要直接导入import { Vector } from "p5"，这会触发服务端渲染时的window错误。
• p5的所有实例方法/类都应通过sketch回调中的p5实例访问，而非全局导入。
• 若需在SvelteKit中使用p5的非sketch代码，必须确保代码仅在客户端执行（通过ssr: false、onMount或动态导入）。

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