本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
自从几年前发布WebGL开源游戏框架babylon.js以来,我们(在社区的帮助下)一直在探索使它变得更好的方法。 我绝对很高兴我们一年多前决定切换到TypeScript。 有关该决定的更多信息,请阅读为什么我们决定从Babylon.js的纯JavaScript转换为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版本 ”从ES5切换到ES6:
就是这样!
重新编译解决方案,您可以立即测试ES6的未来。
我已经发表babylonjs.com的ES6版本在这里 ,让你玩它。
Microsoft Edge和ES6
如果您对ES6感兴趣,建议您观看此BUILD会话: 快速和可扩展应用程序的JavaScript新增功能 。
您会注意到,您需要使用最新的现代浏览器(例如Microsoft Edge)才能执行此演示和代码。 Microsoft Edge和Firefox 41当前是ES6支持中最高级的浏览器。 您可以在此处检查当前对浏览器ES6的支持。
在Windows 10(内部版本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跳升到支持的ES6功能的81% 。 现在支持class,super和generators:
要使此演示在Firefox或Chrome中运行,您可能需要每晚进行构建。
是时候玩F12了
现在已经正确配置了Microsoft Edge,请导航至: http : //www.babylonjs.com/indexES6.html/并在单独的窗口中打开F12 。 在“ 调试器 ”选项卡中,打开“ babylon.gamepadCamera.js ”,然后在代码的“超级”行上设置一个断点 :
启动“ Mansion ”演示并将相机切换到“ Gamepad Camera ”:
您将按预期正确地插入代码:
按F11进入扩展类( BABYLON.FreeCamera ):
您目前正在调试ES6代码! 那不是很酷吗? :-)
在“ 调试器 ”选项卡中,打开“ babylon.virtualJoystick.js ”,并在箭头功能内的第78行上设置一个断点:
将摄像头切换为“ 虚拟游戏杆摄像头 ”,触摸屏幕或单击鼠标左键,即可调试箭头功能:
现在,假设您想编辑ECMAScript 6代码以改善调试体验。 转到“ 实验 ”标签并启用“ 编辑JavaScript ”选项:
重新启动浏览器。 现在,将这行代码添加到上一个句柄“ let foo = 'test'
”,然后再次执行上一个操作:
好,让我们回顾一下。 该演示使用的是: ECMAScript 6,带有类,超级和箭头功能,WebGL,Web Audio,Gamepad API和Pointer Events 。 谢谢Babylon.js,谢谢TypeScript和Microsoft Edge! ;-)
如果您对我们在F12中所做的其他改进感兴趣,请查看本文: 宣布Windows 10中F12开发人员工具的最新改进
使用JavaScript进行更多操作
本文是Microsoft技术传播者开发的Web开发系列文章的一部分,内容涉及实用的JavaScript学习,开源项目以及互操作性最佳实践,包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。
我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试,包括Microsoft Edge(Windows 10的默认浏览器):
- 扫描您的站点以查找过期的库,布局问题和可访问性
- 在Mac,Linux和Windows上使用虚拟机
- 在您自己的设备上远程测试Microsoft Edge
- GitHub上的编码实验室:跨浏览器测试和最佳实践
我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习:
- Microsoft Edge Web Summit 2015 (新浏览器,受支持的新网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么)
- 哇,我可以在Mac和Linux上测试Edge和IE! (来自Rey Bango)
- 在不中断网络的情况下推进JavaScript (摘自Christian Heilmann)
- 使Web正常工作的Edge渲染引擎 (来自Jacob Rossi)
http://dev.modern.ie/tools/vms/windows/?utm_source=SitePoint&utm_medium=article50&utm_campaign=SitePoint
- 使用WebGL释放3D渲染 (来自David Catuhe,包括vorlon.JS和babylonJS项目)
- 托管的Web应用程序和Web平台创新 (来自Kevin Hill和Kiril Seksenov,包括歧管 .JS项目)
Web平台的更多免费跨平台工具和资源:
From: https://www.sitepoint.com/experiment-ecmascript-6-babylon-js-typescript-1-5/