在 Babylon.js 上使用 TypeScript 1.5 体验 ECMAScript 6

David Rousset

5.00/5 (3投票s)

2015年10月14日

CPOL

5分钟阅读

16671

自从几年前发布了 WebGL 开源游戏框架 babylon.js 以来，我们（在社区的帮助下）一直在探索如何使其变得更好。

自从几年前发布了 WebGL 开源游戏框架 babylon.js 以来，我们（在社区的帮助下）一直在探索如何使其变得更好。我非常高兴我们一年多前决定转向 TypeScript。有关该决定的更多信息，请阅读我们为什么决定从纯 JavaScript 转向 Babylon.js 的 TypeScript 版本

感谢 TypeScript，我们能够提高代码质量、提高生产力并创建我们引以为傲的精彩 Playground：http://www.babylonjs-playground.com/，它在浏览器中提供了自动补全功能！我们还能够毫无困难地欢迎一些具有 C# 背景但 JS 技能较少的新团队成员。但由于 TypeScript 编译器，我们还可以在不重写一行代码的情况下测试未来！

我们仍然使用 Visual Studio 和 TFS 编写 babylon.js，并定期将代码推送到 github 仓库。通过将项目升级到 Visual Studio 2015 RTM，我们能够将其升级到 TypeScript 1.5。

完成后，让我向您展示我是如何快速将 Babylon.js 从 ES5 升级到 ES6 的。右键单击您的项目，导航到“TypeScript Build”，然后将“ECMAScript version”从 ES5 切换到 ES6

就这样！

重新编译解决方案，您就可以立即测试 ES6 的未来。

我在这里发布了 babylonjs.com 的 ES6 版本：http://www.babylonjs.com/indexES6.html/，让您玩一玩。

Microsoft Edge 和 ES6

如果您对 ES6 感兴趣，我建议观看此 BUILD 会话：JavaScript 中用于快速可扩展应用的新功能。

您会注意到您需要一个非常新的现代浏览器，例如 Microsoft Edge 才能执行此演示和代码。Microsoft Edge 和 Firefox 41 是目前支持 ES6 最先进的浏览器。您可以在此处查看当前浏览器的 ES6 支持情况。

在 Windows 10 (build 10240) 上的 Microsoft Edge 中启动它，您将获得这些结果

MS Edge 支持 67% 的 ES6 功能，Firefox 41 支持 68%。这些结果令人印象深刻！

尽管如此，如果您在 MS Edge 中启动 Babylon.js 的 ES6 版本，您会在 F12 中看到一些错误

让我们导航到 babylon.math.js 以检查错误。我们在这里遇到了问题

“class”关键字尚不支持用于生产环境。这是因为规范最近发生了变化，所有浏览器都将其放在一个标志后面。

要启用它，请在 MS Edge 中导航到“about:flags”并“启用实验性 JavaScript 功能”

如果您现在再次运行 ES6 兼容性工具：http://kangax.github.io/compat-table/es6/，您会看到 MS Edge 跳到了 81% 的 ES6 功能支持。它现在支持 class、super 和 generators

为了使此演示在 Firefox 或 Chrome 中运行，您可能需要一个每夜构建版本。

是时候在 F12 中玩玩了

现在 Microsoft Edge 已正确配置，导航到：http://www.babylonjs.com/indexES6.html/ 并在单独的窗口中打开 F12。在“Debugger”选项卡中，打开“babylon.gamepadCamera.js”并在“super”代码行上设置一个断点