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

Posted 2023-02-19

【中文标题】Typescript + Require.js + PIXI 6 - 导入附加到窗口但在主范围内未定义

【英文标题】：Typescript + Require.js + PIXI 6 - import attaches to window but undefined in main scope

【发布时间】：2021-06-11 14:07:06

【问题描述】：

我正在尝试将项目从 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) 
    “使用严格”；
    Object.defineProperty(exports, "__esModule",  value: true );
    类主
        构造函数（）
            console.log('window.PIXI', window.PIXI); //定义，包含所有 Pixi 模块。
            console.log('PIXI', PIXI); //不明确的
            console.log('window.FOO', window.FOO); //不明确的
            console.log('FOO', FOO); //定义。
        
    
    出口。主要=主要；
    新的主要（）；
);

Foo.ts

export class Foo

【参考方案1】：

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

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