搭建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地址