搭建phaser的typescript模版

phaser官方提供了一个使用了webpack模版的项目，github地址,该项目已经使用了babel和webpack，在此基础上，我们加入typescript。

1. 安装typescript和ts-loader：

npm install typescript --save-dev
npm install ts-loader --save-dev

2. 在webpack/base.js的配置中增加.ts文件的loader：

{
  test: /\.ts$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader'
    },
    {
      loader: 'ts-loader'
    },
  ]
},

3. 在src/增加phaser.d.ts文件，该文件也是官方提供的。
4. 根目录下添加tsconfig.json文件，一个参考配置如下

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "CommonJS",
    "sourceMap": true,
    "noImplicitAny": false,
    "strict": false
  },
  "include": [
    "src/*"
  ]
}

5. 此时可以在src/下进行ts文件的开发，但是比如加载图片还是有问题，会提示找不到module，为此，将图片声明为module。
6. 在根目录下新建index.d.ts，

    declare module "*.png" {
      const content: string;
      export default content;
   }
   

   然后修改tsconfig.json文件

    {
      "compilerOptions": {
      "target": "ES2016",
      "module": "CommonJS",
      "sourceMap": true,
      "noImplicitAny": false,
      "strict": false
    },
      "include": [
        "src/*", 
        "index.d.ts",  
      ]
    }
   

   即可按找如下方式加载图片：

   import * as logo from '../assets/down.png';
   
   

一个加入了typescript的phaser模版的github地址，文章另见搭建phaser的typescript模版