无法将PIXI js作为模块导入

问题描述 投票：0回答：1

我试图为PIXI js设置一个简单的测试环境，但在从PIXI导入时，控制台调试器卡住了。

未捕获的TypeError.Failed to resolve module specifier "pixi.js": 无法解析模块指定符 "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: './' },
        ]),
    ],
};

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

javascript node.js webpack pixi.js
1个回答
0
投票

如果我对你的问题理解正确，这个错误发生在浏览器中。正确吗？

如果是这样的话，最可能的罪魁祸首是你在浏览器中直接通过index.html加载index.js。浏览器自然无法找到pixi.js而失败。是的，你可能是通过webpack开发服务器加载index.html，但它对你来说根本没有任何用处。

首先使用webpack的原因是什么？我的猜测是：你想把整个appgame的代码捆绑在一个大的JS文件中（app.js或game.js "bundle"）。

如果这是你的意图，我建议你一步一步来，确保你测试并理解每一步的全部细节。

  • 从一个空的webpack.config.js开始。
  • 添加 entry 并将其指向你游戏的主JS模块。
  • 在主JS文件中添加一些 "导入"（包括PIXI和你自己的模块，如 mainmenu.js 或 gameplay.js).
  • 加 output 并指定你想把游戏的 "大捆绑 "放在哪里。
  • 运转 webpack 在命令行中，确保它成功完成，仔细检查你的输出JS看起来不错（甚至不要尝试在网络浏览器中打开它）。

当这一切成功后，创建index.html，并将你的游戏的 "大捆绑 "加入其中（只需根据需要手动复制文件到临时文件夹中）。如果一切正常，用webpack自动完成这一步。CopyPlugin 或与 HtmlWebpackPlugin.

最后，确保这一切都能与游戏的生产迷你版构建，并与webpack开发的web服务器完美结合。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.