使用pnpm、vite搭建Phaserjs的开发环境

首先，确保你已经安装了 Node.js 和 npm。然后按照以下步骤操作：

一、使用pnpm初始化一个新的 Vite 项目

pnpm create vite

输入名字

选择模板，这里我选择Vanilla,也可以选择其他的比如vue

选择语言

项目新建完成

二、安装相关依赖

进入项目，安装依赖

cd vite-phaserjs-demo01
pnpm install
pnpm add --save phaser

三、替换main.js文件内容

import Phaser from 'phaser';const config = {type: Phaser.AUTO,width: 800,height: 600,scene: {preload: preload,create: create,update: update}
};const game = new Phaser.Game(config);
var text;var textStyle= { font: "48px Arial", fill: "#ff0044", align:"center" };
function preload () {//preload...
}function create () {// 添加文本到场景中text = this.add.text(400, 300, 'Hello, Phaser!', {fontSize: '48px',color: '#ffffff',fontFamily: 'Arial'});console.log('text', text)//锚点设置// 设置文本锚点为中心text.setOrigin(0.5);
}function update () {//update ...
}

最后输入pnpm run dev运行效果如下：