无法将 PIXI js 作为模块导入答案

【问题标题】：Can't import PIXI js as a module无法将 PIXI js 作为模块导入
【发布时间】：2020-09-07 11:04:20
【问题描述】：

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

未捕获的类型错误：无法解析模块说明符“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: './' },
        ]),
    ],
};

知道是什么原因造成的吗？

【问题讨论】：

这里有。还有“文件名：'app.js'”。这会是罪魁祸首吗？如果你只是用 webpack 编译你的应用，那么生成的 app.js 看起来不错吗？
我对webpack的了解有限。 filename: app.js 似乎是输出而不是相对路径。我没有创建 app.js 文件。只有 index.js 和 index.html
我可以建议您创建绝对最小的项目来重现您的问题吗？ Webpack 是一个模块打包器。您已将其配置为采用“./src/app.js”，查看其所有依赖项并生成包含游戏所有代码的单个“./dist/app.js”。所以从 webpack 配置中删除所有插件，暂时忘记打开网络浏览器。只需确保在控制台中运行 webpack 获取您的输入 JS 文件并创建您想要的输出 JS 文件。让我试着以目前的形式回答这个问题......

标签： javascript node.js webpack pixi.js

【解决方案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看起来不错（甚至暂时不要尝试在网络浏览器中打开它）。

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

最后，确保这一切都适用于游戏的生产缩小版本，以及 webpack 开发 Web 服务器。

【讨论】：