phaser官方供应了一个使用了webpack模版的项目,github地点,该项目已使用了babel和webpack,在此基础上,我们到场typescript。
装置typescript和ts-loader:
npm install typescript --save-dev npm install ts-loader --save-dev
在webpack/base.js的设置中增添.ts文件的loader:
{ test: /\.ts$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' }, { loader: 'ts-loader' }, ] },
- 在src/增添phaser.d.ts文件,该文件也是官方供应的。
根目录下增加tsconfig.json文件,一个参考设置以下
{ "compilerOptions": { "target": "ES2016", "module": "CommonJS", "sourceMap": true, "noImplicitAny": false, "strict": false }, "include": [ "src/*" ] }
- 此时能够在src/下举行ts文件的开辟,然则比方加载图片照样有题目,会提醒找不到module,为此,将图片声明为module。
在根目录下新建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地点