为什么即使在定义了 PNG 类型之后，我仍会从 PNG 文件的 TypeScript 中收到“未找到模块”错误？

Question

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

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

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 文件的自定义类型定义。在项目的根目录中，我添加了一个仅包含 PNG 文件定义的 custom-typings.d.ts 文件。

自定义-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

找到更多信息

为什么即使在定义了 PNG 类型之后，我仍会从 PNG 文件的 TypeScript 中收到“未找到模块”错误？

Why am I getting a Module Not Found error from TypeScript for PNG files even after defining a PNG type?

typescript

webpack

webpack-dev-server

typescript-typings

phaser-framework

SingleScene.ts

自定义-typings.d.ts

tsconfig.json

webpack.config.js