为什么即使在定义 PNG 类型之后，我也会从 TypeScript 中为 PNG 文件收到 Module Not Found 错误？

Question

我正在尝试用 HTML 创建游戏，我决定使用 Phaser 3 以及 Webpack 和 Typescript 来实现现代实践。我现在正在尝试导入一个 PNG 文件以与 Phaser 一起使用，但是当我尝试运行 webpack-dev-server 时，Typescript 不断抛出 Module not found: Error: Can't resolve 'assets/tower-base.png'。我花了一段时间阅读谷歌搜索结果，但我发现你需要为 png 文件定义一个自定义类型，我已经完成了。这似乎解决了大多数人的问题，但似乎对我不起作用，我不知道下一步该尝试什么。希望各位好心人能指出我哪里错了，为什么。

在我的 Phaser 场景中，我正在尝试导入图像。这是我的场景文件：

SingleScene.ts

import * as Phaser from 'phaser';
import TowerBase from 'assets/tower-base.png';

export default class SingleScene extends Phaser.Scene {
    constructor() {
        super('single-scene');
    }

    preload() {
        this.load.image('towerBase', TowerBase);
    }

    create() {
    }
}

该错误具体发生在第 2 行。因此，在谷歌搜索该问题后，我发现我需要为 PNG 文件自定义类型定义。在我的项目的根目录中，我添加了一个 custom-typings.d.ts 文件，其中仅包含 PNG 文件的定义。

custom-typings.d.ts

declare module "*.png" {
    const value: any;
    export default value;
}

然后我在typeRoots 下的tsconfig.json 文件中引用了这个文件。这是我完整的完整配置文件

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "module": "es6",
        "target": "es5",
        "allowJs": true,
        "sourceMap": true,
        "noImplicitAny": true
    },
    "exclude": [
        "node_modules"
    ],
    "typeRoots": [
        "./custom-typings.d.ts",
        "./node_modules/phaser/types"
    ],
    "types": [
        "Phaser"
    ]
}

我已经确保在我的 webpack 配置中也有一个图片规则。这是我的 webpack 配置文件的模块规则部分：

webpack.config.js

module: {
    rules: [
        {
            test: /\.tsx$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.js$/,
            use: ['source-map-loader'],
            enforce: 'pre',
        },
        {
            test: /\.s[ac]ss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    outputPath: 'assets',
                },
            },
        },
    ],
},

据我在谷歌上搜索问题可以看出，一切都应该是这样，但显然我遗漏了一些东西，否则它会起作用。我做错了什么？

Answer 1

您似乎在这里引用了绝对路径。如果你改为：它是否有效：

import TowerBase from './assets/tower-base.png';

如果是这样，并且如果您想使用绝对路径，则需要在 tsconfig.json 中设置路径映射，如下所示：

"compilerOptions": {
  "baseUrl": "./",
    "paths": {
      "assets/*": ["./assets/*"]
    }
}

您可以在https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping找到更多信息