typescript - SvelteKit 中的 Pixi.js 仅在构建时出现 'self is not defined' 错误

Question

正如标题所述，当在 SvelteKit 中使用 Pixi.js 时，只有在构建应用程序时，它才会抛出“self is not Defined”错误，并且可以追溯到 @pixi/settings模块。我已经尝试了我所知道的一切可能的方法来解决这个问题。首先，我使用垫片给它一些虚拟信息，但这不起作用:

if (typeof window === 'undefined') {
    globalThis.window = {} as any;
}
if (typeof self === 'undefined') {
    globalThis.self = globalThis.window;
}
if (typeof document === 'undefined') {
    if (window.document) {
        globalThis.document = window.document;
    } else {
        globalThis.document = window.document = {
            createElement: (elementName: string) => {
                switch (elementName) {
                    case 'canvas':
                        return {
                            getContext: (contextName: string) => {
                                switch (contextName) {
                                    case 'webgl':
                                        return {
                                            getExtension: () => {}
                                        };
                                    case '2d':
                                        return {
                                            fillRect: () => {},
                                            drawImage: () => {},
                                            getImageData: () => {}
                                        };
                                }
                            }
                        };
                }
            }
        } as any;
    }
    if (typeof CanvasRenderingContext2D === 'undefined') {
        globalThis.CanvasRenderingContext2D = { prototype: {} };
    }
}
export {};

垫片提供了运行所需的所有必要的虚拟信息和变量，但我想这对构建并不重要。然后我尝试在代码中动态导入 pixi.js onMount，如下所示:

<script lang="ts">
    import '$utils/pixi-ssr-shim';
    import { onMount } from 'svelte';
    import App from './utils/App';
    import { run } from './seating-chart';

    let el: HTMLDivElement;

    onMount(async () => {
        //@ts-ignore
        const PIXI = await import('pixi.js');

        run(el, PIXI);

        window.addEventListener('resize', () => {
            App.app.destroy(true);
            App.app = null;
            App.viewport = null;

            run(el, PIXI);
        });
    });
</script>

<div class="flex items-center justify-around">
    <div bind:this={el} />
</div>

我还尝试创建自己的 pixi.js 包，就像 pixijs.io/customize 所做的那样，但这只会产生另一个我无法烦恼的问题。

所以，我不知道如何解决这个问题，因为我不能绕过错误并运行程序。

Answer 1

这实际上是由于pixijs代码在其代码中使用了self引起的，当sveltekit编译器分析它时，它会出错，因为nodejs没有self作为变量，我已经修复了这个问题问题并创建了一个到 pixjs 主分支的拉取请求，该分支将在 6.3.0 发布。

这是公关: https://github.com/pixijs/pixijs/pull/8050