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

【问题标题】：How to properly install and set up PIXI.js? (PIXI is not defined)如何正确安装和设置 PIXI.js？（PIXI 未定义）
【发布时间】：2019-07-27 23:55:46
【问题描述】：

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

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

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？

【问题讨论】：

标签： javascript pixi.js

【解决方案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();

【讨论】：

请注意，导入语句不会像上面写的那样工作。应该是import * as PIXI from 'pixi.js'
好收获。更新了！