我已经按照PIXI.js文档中的每一步操作，但是我无法让它工作。在基本使用示例（https://www.npmjs.com/package/pixi.js?activeTab=readme）中，他们使用npm安装pixi.js：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>在应用程序. 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);谢谢你的帮忙!
1条答案
按热度按时间dfddblmv1#
我认为这种“裸模块”导入需要使用捆绑器。
裸模块导入是指指定模块的名称（如'pixi.js'）而不是文件的路径（如'./pixi.js'）。节点支持此功能，但仅在服务器上，因为大多数浏览器不支持此功能。
现在，如果你在使用npm，你可能也在使用bundler，比如Vite或者Webpack，这些工具允许你使用Bare Module导入，因为它们已经把你的依赖项Map到导入它们的文件，这样他们就可以把所有东西很好地捆绑在一起。
例如，如果您通过运行
npm create vite@latest启动一个项目，并按照Vanilla JS设置的提示进行操作，那么您可以将生成的index.html的内容替换为现有的index.html，并将main.js的内容替换为Application.js。然后，运行npm run dev启动dev服务器，它应该能够正常工作！