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

Question

I've followed every step of the PIXI.js documentation but I cannot get it to work.我已按照 PIXI.js 文档的每一步进行操作，但无法使其正常工作。 In the basic useage example ( https://www.npmjs.com/package/pixi.js?activeTab=readme ), they are installing pixi.js with npm: npm install pixi.js .在基本使用示例 ( https://www.npmjs.com/package/pixi.js?activeTab=readme ) 中，他们正在安装 pixi.js npm: npm install pixi.js After that they are importing PIXI from 'pixi.js': import * as PIXI from 'pixi.js' .之后他们从 'pixi.js' 导入 PIXI： import * as PIXI from 'pixi.js' 。 If I try to run my application after I've followed all the steps listed above, I get an error:如果我在执行完上面列出的所有步骤后尝试运行我的应用程序，我会收到错误消息：

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

Here is my code:这是我的代码：

(I am using JavaScript not TypeScript!) （我使用的是 JavaScript 而不是 TypeScript！）

In index.html:在 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>

in Application.js:在 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);

Thanks for your help!谢谢你的帮助！

Answer 1

I believe this sort of "Bare Module" import requires the use of a bundler.我相信这种“裸模块”导入需要使用捆绑器。

Bare Module imports are when you specify a name for the module, like 'pixi.js', rather than the path to the file, like './pixi.js'.裸模块导入是指您为模块指定名称（如“pixi.js”）而不是文件路径（如“./pixi.js”）。 Node does support this, but only on a server, for most Browsers do not support this functionality. Node 确实支持此功能，但仅限于服务器，因为大多数浏览器不支持此功能。

These days, it's often assumed that if you're using npm, you're probably also using a bundler, like Vite or Webpack. These tools allow you to use the Bare Module imports, because they're already mapping your dependencies to your files that import them so that they can bundle everything together all nicely.现在，人们通常假设如果您使用的是 npm，那么您可能也在使用捆绑器，例如 Vite 或 Webpack。这些工具允许您使用裸模块导入，因为它们已经将您的依赖项映射到您的文件导入它们，以便它们可以将所有东西很好地捆绑在一起。

For example, if you start a project by running npm create vite@latest and follow the prompts for Vanilla JS setup, you could then essentially replace the contents of the generated index.html with your existing index.html, and replace the contents of main.js with your Application.js.例如，如果您通过运行npm create vite@latest启动一个项目并按照提示进行 Vanilla JS 设置，那么您基本上可以用现有的 index.html 替换生成的 index.html 的内容，并替换 main 的内容.js 与您的 Application.js。 Then, run npm run dev to start the dev server, and it should hopefully work!然后，运行npm run dev来启动开发服务器，它应该可以正常工作！

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

问题描述

1 个解决方案

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

I believe this sort of "Bare Module" import requires the use of a bundler.我相信这种“裸模块”导入需要使用捆绑器。

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

问题描述

1 个解决方案

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

I believe this sort of "Bare Module" import requires the use of a bundler.我相信这种“裸模块”导入需要使用捆绑器。

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