在 Aurelia 中导入移相器答案

【问题标题】：Import Phaser in Aurelia在 Aurelia 中导入移相器
【发布时间】：2017-12-11 09:12:00
【问题描述】：

我想在使用 typescript 的 aurelia CLI 应用程序中使用 Phaser， npm install 运行正常，我已经修改了 aurelia.json 如下

 ...
 {
     "name": "phaser",
     "path": "../node_modules/phaser/build",
     "main": "phaser"
 },
 ....

当我尝试在 ts 文件中使用移相器时，它说移相器未定义。而事实上，看起来cli onsole，似乎并没有跟踪移相器。如果我将依赖项名称更改为“phaserjs”之类的名称，它会开始跟踪它，但我当然不能使用它，因为导入需要另一个名称。

import {autoinject} from 'aurelia-framework';
import * as phaser from "phaser";

@autoinject
export class Login {
    attached():void{
        console.log("this print undefined", Phaser);
    }
}

我尝试使用 import * as phaser from "phaser"， import {Game} from "phaser" 似乎没有任何效果。但是，查看 vendor-bundle.js，发现 phaser.js 行。所以我不知道为什么我不能使用它

任何帮助都会很棒。

【问题讨论】：

标签： phaser-framework aurelia

【解决方案1】：

对于稍后遇到相同问题的人： Phaser 2x 的设计不是模块化的。为了能够使用它，您需要导出它需要的几个依赖项。首先，使用phaser-ce（社区版），它支持webpack。二、导出其依赖：

在使用 requirejs 的 aurelia 中，修改 aurelia.json 供应商依赖项。

     {
        "name": "pixi",
        "path": "../node_modules/phaser-ce/build/custom",
        "main": "pixi",
        "exports": ["PIXI"]
      },
      {
        "name": "p2",
        "path": "../node_modules/phaser-ce/build/custom",
        "main": "p2",
        "exports": ["p2"]
      },
      {
        "name": "phaser-ce",
        "path": "../node_modules/phaser-ce/build/custom",
        "main": "phaser-split",
        "exports": ["Phaser"]
      },

现在您可以毫无问题地使用移相器

import * as Phaser from "phaser-ce";

Phaser-CE 还在其模块文件夹“typings”中包含打字稿定义

【讨论】：