SvelteKit 中的 Pixi.js 仅在构建时给出“未定义自我”错误答案

【问题标题】：Pixi.js in SvelteKit gives a 'self is not defined' error only while buildingSvelteKit 中的 Pixi.js 仅在构建时给出“未定义自我”错误
【发布时间】：2022-01-17 18:59:41
【问题描述】：

如标题所述，在 SvelteKit 中使用 Pixi.js 时，仅且仅在构建应用程序时，它会吐出“未定义自我”错误，并追溯到 @pixi/settings 模块。我已经尝试了所有可能的方法来解决这个问题。首先，我使用 shim 给它一些虚拟信息，但这不起作用：


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 {};

shim 提供了运行所需的所有必要虚拟信息和变量，但我想这对构建无关紧要。然后我尝试在代码中动态导入 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>

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

所以，我不知道该怎么做才能解决这个问题，因为我不能绕过错误并运行程序。

【问题讨论】：

请阅读github.com/pixijs/pixijs/issues/7703
在把这个问题放在一起之前，我实际上已经阅读了这个，我遇到的问题是它只在构建时出错

标签： typescript pixi.js sveltekit

【解决方案1】：

这实际上是由于 pixjs 代码在他们的代码中使用了self 造成的，当 sveltekit 编译器分析它时，它会出错，因为 nodejs 没有 self 作为变量，我已经解决了这个问题并创建了一个 pull请求到将在 6.3.0 发布的 pixjs 主分支。

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

【讨论】：

【解决方案2】：

不确定这是否相关，但我将 Pixi 添加到我的 Svelte 项目中（基于使用汇总的官方 Svelte 入门模板）并且我开始收到此错误：

ReferenceError: url$1 is not defined

它“一般”来自我的捆绑包，并没有指向特定的故障点。

经过一番搜索，我发现在rollup.config.js 中将preferBuiltins: false 设置添加到我的resolve 插件设置可以修复它（其中resolve 是从@rollup/plugin-node-resolve 插件导入的。

所以在rollup.config.js:

import resolve from "@rollup/plugin-node-resolve";

export default {
  ...
  plugins: [
    resolve({
      ...
      preferBuiltins: false,
      ...
    })
  ]
  ...
}

【讨论】：