Typescript + Require.js + PIXI 6 - 导入附加到 window 但在主要范围内未定义

Question

我正在尝试将一个项目从 Pixi.js 5.3 升级到 6.0.0 并且运行遇到了一个奇怪的问题。以前我使用 ///<reference types='pixi.js'/> 只是为了让 IDE 识别 Pixi 类型。这似乎不再有效，因为 v6 已经取消了 PIXI 命名空间。

尝试import * as PIXI from 'pixi.js' 允许 Typescript 识别 PIXI。但是当 PIXI 附加到 window 而不是在导入它的模块中定义时，发生了一些奇怪的事情。

这是我能想出的最简单的例子。 PIXI 像任何导入一样应该附加到 Main 并在 Main 中可用。谁能解释为什么 PIXI 在这里的行为与任何其他导入不同？

index.html:

<script data-main='main' src='require.js'/>

Main.ts:

import * as PIXI from 'pixi.js';
import * as FOO from 'Foo';
export class Main {
    public constructor() {
        console.log('window.PIXI',window.PIXI); //defined, contains all Pixi modules.
        console.log('PIXI',PIXI); //undefined
        
        console.log('window.FOO',window.FOO); //undefined
        console.log('FOO',FOO); //defined.
    }
}

new Main();

Main.js (AMD)

define(["require", "exports", "pixi.js", "Foo"], function (require, exports, PIXI, FOO) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    class Main {
        constructor() {
            console.log('window.PIXI', window.PIXI); //defined, contains all Pixi modules.
            console.log('PIXI', PIXI); //undefined
            console.log('window.FOO', window.FOO); //undefined
            console.log('FOO', FOO); //defined.
        }
    }
    exports.Main = Main;
    new Main();
});

Foo.ts

export class Foo {}

Answer 1

我发现我需要在 require.js 配置中为 pixi.js 添加垫片。这样，导入工作正常（尽管 PIXI 仍然也附加到 window）。

require.config({
        shim: {
            'pixi.js': {
                exports: 'PIXI'
            }
        }
    });

Typescript + Require.js + PIXI 6 - 导入附加到 window 但在主要范围内未定义

Typescript + Require.js + PIXI 6 - import attaches to window but undefined in main scope

javascript

requirejs

typescript

pixi.js