Pixi.js npm 安装 import * as PIXI from 'pixi.js' V7

Question

我已按照 PIXI.js 文档的每一步进行操作，但无法使其正常工作。 在基本使用示例 ( https://www.npmjs.com/package/pixi.js?activeTab=readme ) 中，他们正在安装 pixi.js npm: npm install pixi.js 之后他们从 'pixi.js' 导入 PIXI： import * as PIXI from 'pixi.js' 。 如果我在执行完上面列出的所有步骤后尝试运行我的应用程序，我会收到错误消息：

Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".

这是我的代码：

（我使用的是 JavaScript 而不是 TypeScript！）

在 index.html 中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <title>TBDv2</title>
        <link rel="stylesheet" href="style.scss">
    </head>
    <body>
        <script type="module" src="js/Application.js"></script>
    </body>
</html>

在 Application.js 中：

//  -> workaround but doesn't work with sprite loader
// import * as PIXI from '/node_modules/pixi.js/dist/pixi.mjs';

import * as PIXI from 'pixi.js';
// import { Application, Loader, Sprite } from 'pixi.js';

const config = {
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0xffffff,
}

const app = new PIXI.Application(config);
document.body.appendChild(app.view);

window.onresize = () => {
    app.renderer.resize(window.innerWidth, window.innerHeight);
}

const Graphics = PIXI.Graphics;

const graphics = new Graphics();

graphics
    .lineStyle(2, 0x000, 1)
    .beginFill(0x123456)
    .drawPolygon([
        0, 0,
        50, 0,
        50, 50,
    ])
;

app.stage.addChild(graphics);

谢谢你的帮助！

Answer 1

我相信这种“裸模块”导入需要使用捆绑器。

裸模块导入是指您为模块指定名称（如“pixi.js”）而不是文件路径（如“./pixi.js”）。 Node 确实支持此功能，但仅限于服务器，因为大多数浏览器不支持此功能。

现在，人们通常假设如果您使用的是 npm，那么您可能也在使用捆绑器，例如 Vite 或 Webpack。这些工具允许您使用裸模块导入，因为它们已经将您的依赖项映射到您的文件导入它们，以便它们可以将所有东西很好地捆绑在一起。

例如，如果您通过运行npm create vite@latest启动一个项目并按照提示进行 Vanilla JS 设置，那么您基本上可以用现有的 index.html 替换生成的 index.html 的内容，并替换 main 的内容.js 与您的 Application.js。 然后，运行npm run dev来启动开发服务器，它应该可以正常工作！

Pixi.js npm 安装 import * as PIXI from 'pixi.js' V7

问题描述

1 个解决方案

解决方案1
0 2023-01-14 22:27:23

我相信这种“裸模块”导入需要使用捆绑器。

Pixi.js npm 安装 import * as PIXI from 'pixi.js' V7

问题描述

1 个解决方案

解决方案1 0 2023-01-14 22:27:23

我相信这种“裸模块”导入需要使用捆绑器。

解决方案1
0 2023-01-14 22:27:23