Sencha Cmd 6.5 让你的 ExtJS6 项目使用 ES6/ES7/ES8 语法规范

Sencha Cmd 6.5 最大的变化：

• 支持动态加载包(dynamically packages loading)，适用于开发大型企业级项目。参考 Create a Smooth Loading Experience for Large Enterprise Apps with Sencha Cmd

• 支持 ES6/ES7/ES8 语法规范（包括 Classic 和 Modern），支持在 build 的时候，把 ES6+ 语法 转换成 ES5 规范(转码，英文Transpiler)，以运行在低版本或者传统浏览器(如IE8)上。

ES6/ES7/ES8 语法规范不在本文涉及范围内，本文只介绍如何配置你的 ExtJS6 项目，以便在开发时使用 ES6+ 规范。

配置开发时的规范 和 build 输出的规范

在你的项目的 app.json 文件中增加一个配置项：

"language": {    "js": {        "input": "ES6", // 或 ES7、ES8        "output": "ES5"    }}

上面的配置项就是说在 build 的时候，会将 ES6 代码 转为 ES5 代码。

如果你不想转码，比如你的项目只能运行在高版本的 现代浏览器(Chrome/FireFox/Edge)，那么，你可以禁用 Sencha Cmd 的转码功能：

"language": {    "js": {        "input": "ES6",        "output": "ES6"    }}

如果你的项目不允许使用 ES6+，而只能使用 ES5，那么你可以这样配置：

"language": {    "js": {        "input": "ES5"    }}

注意：sencha app watch 的时候，是不会转码的（可以加快开发调试的速度，因为现代浏览器对ES6+支持的好），只有在 build 的时候才会根据你的配置转码。

Polyfills

Polyfill你可以理解为“腻子”，就是装修的时候，可以把缺损的地方填充抹平。

举个例子，html5 的 storage(session/local)，还有 ES6 中 Array 类型的 entries()/keys()/values(), 不同浏览器，不同版本，有些支持，有些不支持。

我们又想使用这个特性，怎么办？
有些人就写对应的 Polyfill（Polyfill 有很多），帮你把这些差异化抹平，不支持的变得支持了（简单来讲，写些代码判断当前浏览器有没有这个功能，没有的话，就写一些支持的补丁代码）。

你只需要把需要的Polyfill引入到你的程序里，就可以了。

Sencha Cmd 6.5 支持项目中配置 引入 polyfills，只需要在 app.json 中如下配置：

"production": {    "compressor": {        "polyfills": "all" //或 none、syntax、auto    }},

4个配置值的意思：

• all 是最方便快速的方式。它包含所有的 polyfills 到 最终 build 输出的 app.js 中。如果你使用了 Sencha Cmd 6.5 的 动态加载包(dynamically packages loading)来开发大型企业级项目的话，必须配置为all，否则 build production 出来的 网站可能运行时会出现各种问题

• none 不包含任何 polyfills. 对 package 来说，这是默认的配置，也是最适合的配置。但是 application 应用程序项目不能使用none (如果你启用了 ES6+ 到 ES5 的转码并需要支持传统浏览器的话).

• syntax 只引入 ES6+ 的语法 polyfills，而不包含其它高级实现（比如 Array 类型的新方法）。可以减小输出 app.js 的体积。

• auto 由 Sencha Cmd 根据你写的代码来自动判断需要引入哪些 polyfills。

参考：
- What’s New in Sencha Cmd 6.5.1
- Announcing Ext JS 6.5.2 and Sencha Cmd 6.5.2 GA