时间戳

首页 > 解决方案 > 无法将 PIXI js 作为模块导入

javascript - 无法将 PIXI js 作为模块导入

问题描述

我正在尝试为 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: './' },
        ]),
    ],
};

知道是什么原因导致这种情况发生吗？

标签： javascriptnode.jswebpackpixi.js

解决方案

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

如果是这种情况，最可能的罪魁祸首是您直接在浏览器中通过 index.html 加载 index.js。浏览器自然找不到 pixi.js 而失败。是的，你可能正在通过 webpack 开发服务器加载 index.html，但它对你没有任何用处。

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

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

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

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

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

推荐阅读