搭建phaser的typescript模版

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

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

相关推荐