javascript - 尝试使用 gruntjs 设置 Phaser 和 Typescript

Question

我正在尝试使用带有 grunt 的 Typescript 设置 Phaser 框架。

我的 Gruntfile.js 看起来像这样:

module.exports = function (grunt) {
  // load all grunt tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    typescript: {
      base: {
        src: ['game/**/*.ts'],
        dest: 'dist/js/metropolee.js',
        options: {
          module: 'amd',
          target: 'es5'
        }
      }
    },
    watch: {
      files: '**/*.ts',
      tasks: ['typescript']
    },
    connect: {
      options: {
        port: 9001,
        // change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              mountFolder(connect, 'dist')
            ];
          }
        }
      }
    },
    open: {
      server: {
        path: 'http://localhost:9001'
      }
    },
    copy: {
      dist: {
        files: [
          // includes files within path and its sub-directories
          { expand: true, src: ['assets/**'], dest: 'dist/' },
          { expand: true, flatten: true, src: ['game/plugins/*.js'], dest: 'dist/js/plugins/' },
          { expand: true, flatten: true, src: ['bower_components/**/build/*.js'], dest: 'dist/js/' },
          { expand: true, src: ['css/**'], dest: 'dist/' },
          { expand: true, src: ['index.html'], dest: 'dist/' }
        ]
      }
    }
  });

  grunt.registerTask('build', ['buildBootstrapper' ,'copy', 'typescript']);
  grunt.registerTask('serve', ['build', 'connect:livereload', 'open', 'watch']);
  grunt.registerTask('default', ['serve']);
  grunt.registerTask('prod', ['build', 'copy']);
  grunt.registerTask('buildBootstrapper', 'builds the bootstrapper file correctly',         function() {

  });
};

我有一个像这样的 typescript 代码文件:

module Metropolee
{
    export class Game extends Phaser.Game
    {
        constructor()
        {
            super(800, 600, Phaser.AUTO, "content", null);
        }
    }
}

但由于某些原因，当我运行grunt时，出现以下错误:

Running "buildBootstrapper" task

Running "copy:dist" (copy) task
Created 2 directories, copied 6 files

Running "typescript:base" (typescript) task
>> /Users/drgomesp/Projects/Games/Javascript/Metropolee/game/Game.ts(4,31):
>> error TS2095: Could not find symbol 'Phaser'.
>> /Users/drgomesp/Projects/Games/Javascript/Metropolee/game/Game.ts(8,13):
>> error TS2103: 'super' cannot be referenced in non-derived classes.
>> /Users/drgomesp/Projects/Games/Javascript/Metropolee/game/Game.ts(8,29):
>> error TS2095: Could not find symbol 'Phaser'.
Warning: Task "typescript:base" failed. Use --force to continue.

Aborted due to warnings.

Phaser 名称由于某种原因没有被加载，我不知道为什么。

Answer 1

您需要添加对 phaser.d.ts 的引用:

/// <reference path="phaser.d.ts"/>