Question

我正在尝试为PIXI js设置一个简单的测试环境，但是控制台调试器在从PIXI导入时很困难

未捕获的TypeError：无法解析模块说明符“ pixi.js”。相对引用必须以“ /”、“./”或“ ../”开头。

Pixi.js已与npm install pixi.js一起安装，我对webpack不熟悉，但这似乎是问题所在。

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Animator</title>
    <meta charset="UTF-8" />
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>

index.js：

import * as PIXI from "pixi.js"

...

webpack.config.js：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CopyPlugin([
            { from: 'src/index.html', to: './' },
            { from: 'src/style.css', to: './' },
        ]),
    ],
};

有什么原因导致这种情况发生吗？

Answer 1

如果我正确理解了您的问题，则该错误在浏览器中发生。正确？

在这种情况下，最可能的罪魁祸首是您直接在浏览器中通过index.html加载index.js。浏览器自然无法找到pixi.js并失败。是的，您可能正在通过webpack开发服务器加载index.html，但这对您没有任何帮助。

首先使用webpack的原因是什么？我的猜测是：您要将整个应用程序/游戏代码捆绑到一个大的JS文件中（app.js或game.js“捆绑包”）。

如果这是您的意图，我建议您逐步进行操作，确保您已详细测试并理解了每个步骤：

从一个空的webpack.config.js开始
添加entry并将其指向游戏的主要JS模块。
在主JS文件中添加一些“导入”（PIXI和您自己的模块，例如mainmenu.js或gameplay.js）。
添加output并指定要放置游戏的结果“大包”的位置
在命令行中运行webpack，确保它成功完成，再次检查您的输出JS看起来不错（甚至现在都不要尝试在Web浏览器中打开它）。

这可行时，创建index.html并将其包含的游戏“大包”包括到其中（只需根据需要手动将文件复制到临时文件夹中）。如果一切正常，请使用webpack CopyPlugin或HtmlWebpackPlugin自动执行此步骤。

最后，请确保这一切与最小化的游戏制作版本以及Webpack开发Web服务器均能正常运行。

无法将PIXI js作为模块导入

1 个答案: