DEV Community
·
使用esbuild打包你的phaser.js游戏
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
这篇文章介绍了使用esbuild打包Phaser项目的工作流程。首先设置项目，然后创建文件夹和文件，添加Phaser依赖和dev依赖。接下来创建文件夹和文件结构，包括src文件夹和scripts文件夹。然后编写app.ts和index.html文件作为入口点。使用esbuild进行打包，并添加watch模式和build模式。最后，作者提供了GitHub上的最终代码。
🎯
关键要点
- 文章介绍了使用esbuild打包Phaser项目的工作流程。
- 首先设置项目，使用yarn初始化新项目并添加Phaser和开发依赖。
- 创建src文件夹和scripts文件夹，组织项目结构。
- 编写app.ts和index.html文件作为入口点。
- 使用esbuild进行打包，创建dist文件夹作为输出目录。
- 添加watch模式以便实时监控文件变化并自动重载浏览器。
- 提供build模式的脚本以清理dist目录并进行新构建。
- 最终代码可在GitHub上找到，鼓励读者反馈问题。
❓
延伸问答
如何使用esbuild打包Phaser项目？
首先，使用yarn初始化项目并添加Phaser和esbuild依赖。然后创建src和scripts文件夹，编写app.ts和index.html作为入口点，最后使用esbuild进行打包。
在项目中如何设置watch模式？
在package.json中添加一个脚本，运行scripts/esbuild.start.js文件，该脚本会监控文件变化并自动重载浏览器。
esbuild的build模式有什么作用？
build模式会清理dist目录并进行新的构建，确保输出的文件是最新的，避免多余文件的干扰。
如何组织Phaser项目的文件结构？
项目应包含src文件夹存放游戏文件，scripts文件夹存放脚本，assets文件夹存放资源，app.ts和index.html作为入口文件。
如何在esbuild中处理HTML文件？
在esbuild配置中使用loader选项，将HTML文件设置为'copy'，以便在打包时正确处理。
最终代码在哪里可以找到？
最终代码可以在GitHub上找到，文章中提供了相关链接。
➡️
