如何正确安装和设置PIXI.js？（PIXI 未定义）

Question

我最近通过 github 了解到 pixi.js 并且很感兴趣。

我使用了 npm install pixi.js --save 并粘贴了 github 存储库中的示例代码，但返回了以下错误：

C:\Users\*****\WebstormProjects\pixie_the_game\game.js:4
const app = new PIXI.Application();
            ^

ReferenceError: PIXI is not defined
    at Object.<anonymous> (C:\Users\*****\WebstormProjects\pixie_the_game\game.js:4:13)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

Process finished with exit code 1

我试过查看 pixi 入门页面，但没有找到任何有用的信息。

我哪里错了？如何正确设置 pixi.js?

Answer 1

通常在使用 PIXI 时，您会希望将其作为全局依赖项，因此您可以在 index.html.

中将 script 标记指向它

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
  <!-- Point this at `pixi.min.js` in your node_modules folder -->
  <script src="pixi/pixi.min.js"></script>
<body>
  <script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
  </script>
</body>
</html>

查看此处了解更多信息：https://github.com/kittykatattack/learningPixi#setting-up

或者，如果您不想全局添加它，您可以只在 game.js 的顶部导入它：

import * as PIXI from 'pixi.js'

const app = new PIXI.Application();

如何正确安装和设置PIXI.js？ （PIXI 未定义）

How to properly install and set up PIXI.js? (PIXI is not defined)

javascript

pixi.js

如何正确安装和设置PIXI.js？（PIXI 未定义）