使用 webpack 导入没有相对路径的模块

Question

我正在开发一个 web 游戏，我想用 webpack package。 同时我正在为未来的游戏构建多个库 npm 包。 依赖树看起来像这样

Game
    |__ Lib1
        |__ Lib2
                |__PIXI.Js
                

这些库位于 Game node_modules 文件夹中

So the game is dependent on my Lib1 npm package, which is dependent on my Lib2 npm package which is dependent on the third party library PIXI.js. 我的游戏应用程序将包含 webpack 配置文件，以将所有这些结合在一起。 Lib2 中的一个类是 RenderWindow class 用于设置 PIXI.js 并像这样导入 PIXI：

import * as PIXI from 'PIXI'

通常，上一行的最后一部分包含一个可以找到 PIXI 的相对路径，但对于库开发人员来说，有效地依赖于外部加载它是有用的，因此它不会捆绑在一起。 我的理解是，您在 webpack 配置中使用外部设置，如下所示：

externals: {
    PIXI: 'PIXI',
  }

为了将所有这些联系在一起，pixi 需要作为全局 window object 的一部分进行加载和暴露，这是暴露加载器进入 webpack 的地方：

test: require.resolve("./node_modules/lib2node_modules/pixi.js/dist/browser/pixi.js"),
            use: [{
                loader: 'expose-loader',
                options: {
                    exposes: "PIXI"
                }
            }]
        }

现在，无论我想在 Lib1 或 Lib2 还是我的游戏中使用 PIXI，我都应该能够像这样导入它：

import * as PIXI from 'PIXI'

但是它似乎不起作用，并且在我运行 webpack 时出现以下错误

Cannot find module 'PIXI' or its corresponding type declarations.

以下是 webpack 命令的完整 output：

> typescript_test@0.0.1 standalone__debug
> webpack --mode development --env engine=standalone && webpack-dev-server --open --mode development --env engine=standalone

asset vendor.js 1.68 MiB [compared for emit] [minimized] (name: vendor) 1 related asset
  asset lib2.js 1.74 KiB [emitted] [minimized] (name: lib2) 1 related asset
  asset game.js 282 bytes [compared for emit] [minimized] (name: game)     1 related asset
asset index.html 136 bytes [compared for emit]
asset changelog.txt 0 bytes [compared for emit] [from:    changelog.txt] [copied]
runtime modules 3.53 KiB 7 modules
built modules 1.63 MiB [built]
  modules by path ../lib2/ 1.63 MiB
    modules by path ../lib2/node_modules/pixi.js/dist/browser/*.js 1.63 MiB
      ../lib2/node_modules/pixi.js/dist/browser/pixi-exposed.js 608 bytes [built] [code generated]
      ../lib2/node_modules/pixi.js/dist/browser/pixi.js 1.63 MiB [built] [code generated]
    modules by path ../lib2/src/*.ts 397 bytes
      ../lib2/src/index.ts 150 bytes [built] [code generated]
  ../lib2/src/RenderWindow.ts 247 bytes [built] [code generated] [1 error]
  modules by path ./ 713 bytes
    ./src/standalone.ts 14 bytes [built] [code generated]
./node_modules/expose-loader/dist/runtime/getGlobalThis.js 699 bytes [built] [code generated]
  external "PIXI" 42 bytes [built] [code generated]

ERROR in /lib2/src/RenderWindow.ts
../lib2/src/RenderWindow.ts 2:22-28
[tsl] ERROR in /lib2/src/RenderWindow.ts(2,23)
  TS2307: Cannot find module 'PIXI' or its corresponding type declarations.
ts-loader-default_e3b0c44298fc1c14
 @ ../lib2/src/index.ts 3:0-47 4:0-6:15

webpack 5.70.0 compiled with 1 error in 2202 ms

它出错的文件是 RenderWindow.ts ，它看起来像这样，它抱怨导入

'use strict';
import * as PIXI from 'PIXI'

export class RenderWindow{
private app: PIXI.Application;
public constructor(){
    this.app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0xFFFFFF });
    document.body.appendChild(this.app.view);
}
}