时间戳

首页 > 解决方案 > 如何正确安装和设置 PIXI.js？（PIXI 未定义）

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

问题描述

我最近通过 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？

标签： javascriptpixi.js

解决方案

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

<!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();

推荐阅读