以快速现代的方式启动 JS 游戏开发项目
如果你宁愿把更多时间花在编程上，而不是一边吃麦片一边哭泣，那就读读这篇文章吧。
几年前，我花了一整个晚上试图搭建一个游戏开发项目。
-
我想用一些当时还不可用的现代 JavaScript 特性。
结果花了半个小时配置 Babel…… -
没有模块我简直活不下去，它让一切都井井有条。
跟老旧的 Webpack 搏斗的那一个小时，他再也找不回来了…… -
Phaser（游戏库）当时还没真正做好模块化的准备。
他默默地哭泣着，一边将编译好的程序包脚本标签添加到 head 标签中。
我想你明白我的意思了。
浏览器和库的改进使得前端开发再次变得简单起来。至少感觉上是这样。开发者工具更加注重易用性，而现代浏览器现在也支持大多数常用的 ES6+ 特性。
要学习和运用现代范式进行原型设计，我不再需要经历上述任何步骤。
他会如何利用节省下来的时间呢？
让我们看看发生了什么变化：
- Chrome、Safari、Edge、Firefox 都支持现代 JS 语法，例如类、箭头函数、async/await 等。
- 支持 JS 模块，因此无需在发送到浏览器之前进行打包和编译。
- Phaser 已经发展到 3 版本，将其作为模块导入非常容易。
好吧，但这到底是怎么运作的？
首先但并非最重要的，是老旧的 index.html 文件：
<html>
<body>
<script type="module" src="./app.mjs"></script>
<script type="module">
import './app.mjs';
</script>
</body>
</html>
我猜你注意到了“app.mjs”文件的“mjs”后缀。它代表“Michael Jackson Script”（我猜是这样）。这样浏览器就知道应该把文件作为模块加载。我只能在“mjs”文件中使用“import”语法。
他永远不会承认，但他是在开玩笑，.mjs 的真正含义是这样的
我们来处理 app.js 文件。它足以启动 Phaser：
import './phaser.mjs';
const config = {
type: Phaser.AUTO,
width: 400,
height: 400,
scene: {
preload,
create,
update
}
};
var game = new Phaser.Game(config);
function preload() {}
function create() {}
function update() {}
我仍然需要 Phaser！嘘！让我们从他们的发布页面下载它，并将“phaser.js”重命名为“phaser.mjs”，以便它被识别为一个模块。
这里有个小小的注意事项：“mjs”文件只有在我的服务器以正确的MIME类型传输时才能被加载和解析。我用普通的PHP服务器（我通常使用MacOS的“php -S localhost:9999”命令）没能实现这一点。
自从听到Jon Blow在他的直播中使用“caveat”这个词后，他就一直想用它。
基于 Node 的服务器似乎运行得更好。HttpServer（npm install -g http-server）能够按预期处理文件。我可以在项目文件夹中执行“http-server”命令，并直接访问它输出的链接。
太棒了！我看到了空白画布，Phaser 也正在浏览器中运行。以下截图包含了所有你需要的信息：
接下来是恐怖真空，但这又是另一个话题了。
我的目录下有三个文件：
- index.html
- app.mjs
- phaser.mjs
不需要 node_modules 真是太好了！
感觉就像回到了过去一样，不是吗？
☝️ 别误会我的意思。如果是为了性能、发布和支持各种浏览器，我肯定会打包、使用 Babel 并压缩代码。这一切都是为了尽快实现你的想法，同时还能使用现代功能。再也不用花晚上时间根据测试用例进行配置了。
他可不想再错过女儿的第二次婚礼了！
一旦我决定全面采用打包和转译，后续的配置工作就不会增加太多。JS 文件可以保持原样，仍然可以与 Webpack 或 Parcel 兼容。
准备好开始编程了吗？来看看这篇精彩的 Phaser 3 入门教程吧！
文章来源：https://dev.to/niorad/starting-js-game-dev-projects-the-quick--modern-way-----479b