Почему я получаю сообщение об ошибке «Модуль не найден» от TypeScript для файлов PNG даже после определения типа PNG? - PullRequest
Новая
       73

Почему я получаю сообщение об ошибке «Модуль не найден» от TypeScript для файлов PNG даже после определения типа PNG?

0 голосов
/ 03 августа 2020

Я пытаюсь создать игру на HTML, и я решил использовать Phaser 3 вместе с Webpack и Typescript, чтобы учесть современные методы. Сейчас я пытаюсь импортировать PNG-файл для использования с Phaser, но Typescript продолжает выдавать Module not found: Error: Can't resolve 'assets/tower-base.png', когда я пытаюсь запустить webpack-dev-server. Я потратил некоторое время на чтение результатов Google, но все, что я нашел, это вам нужно определить пользовательскую типизацию для файлов 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. Итак, после поиска в Google я обнаружил, что мне нужно настраиваемое определение ввода для файлов PNG. В root моего проекта я добавил файл custom-typings.d.ts, содержащий только определение для файлов PNG.

custom-typings.d.ts 

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

И затем я сослался на это файл в моем tsconfig.json файле под typeRoots. Это мой полный файл конфигурации для полноты

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.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',
                },
            },
        },
    ],
},

Насколько я могу судить по поиску в Google, все в порядке , но явно я чего-то упускаю, иначе это сработало бы. Что я делаю не так?

1 Ответ

1 голос
/ 03 августа 2020

Кажется, вы здесь ссылаетесь на абсолютный путь. Будет ли это работать, если вместо этого вы: 

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

...