Добрый день, мир не стоит на месте, в прошлом году состоялся релиз ECMAScript 2015 (он же ES6), который привнес множество нововведений, огорчает лишь одно ExtJS и Sencha cmd пока не научились поддерживать данную спецификацию. Причин для того, что бы уже сейчас разрабатывать приложение с учетом ES6 множество. Основные как мне видится — изучение нового стандарта (ваша рыночная конкурентно-способность возрастает) и создание более простого и лаконичного кода, который радует глаз. В данной статье показывается процесс добавления возможности писать ES6 код для ExtJS, с помощью кросс-компилятора Babel со сборкой на лету.

Настройка Babel

Для начала, нам понадобится создать тестовое приложение

sencha -sdk "path\to\framework" generate app TestApp "path\to\application"

Так же нам понадобится npm для установки Babel. В корневой директории созданного приложения, создадим файл package.json с помощью команды

npm init

После ответов на некоторые вопросы файл будет успешно создан, далее необходимо установить сам кросс-компилятор и плагины к нему.

npm install babel-cli --save-dev

npm install babel-preset-es2015 --save-dev

Далее необходимо добавить команды сборки проекта, для этого добавляем в package.json секцию scripts. Так же не забудем добавить плагины для Babel, без них от просто не будет работать, для этого добавим секцию Babel.

...
  "scripts" : {
    "build-prod": "./node_modules/.bin/babel es6 -d app --comments=false --compact=true",
    "build-debug": "./node_modules/.bin/babel es6 -d app --sourceMaps=true",
    "watch": "./node_modules/.bin/babel es6 -d app --watch"
  },
  "babel": {
    "plugins": [
      "check-es2015-constants",
      "transform-es2015-arrow-functions",
      "transform-es2015-block-scoped-functions",
      "transform-es2015-block-scoping",
      "transform-es2015-classes",
      "transform-es2015-computed-properties",
      "transform-es2015-destructuring",
      "transform-es2015-for-of",
      "transform-es2015-function-name",
      "transform-es2015-literals",
      "transform-es2015-object-super",
      "transform-es2015-parameters",
      "transform-es2015-shorthand-properties",       
      "transform-es2015-spread",       
      "transform-es2015-sticky-regex",       
      "transform-es2015-template-literals",       
      "transform-es2015-typeof-symbol",       
      "transform-es2015-unicode-regex",       
      "transform-regenerator", 
      [ "transform-es2015-modules-commonjs", { "strict" : false }]
    ]
  }
...

Настройка Sencha cmd

Со стороны ExtJS проекта, необходимо перенести файл app.js из корня проекта в папку app. Далее папку app необходимо переименовать в es6.

mv app.js app
mv app es6

Не забудьте указать новое расположение app.js в файле app.json.

...
    "js": [
...
        {
            "path": "app/app.js",
            "bundle": true
        }
    ]
....

Остался последний шаг, отредактируем файл build.xml в корне проекта, добавив в него следующую конструкцию внутрь тега project

<target name="-before-build">
	<x-shell reloadprofile="true" dir="${basedir}">
		npm run build-debug
	</x-shell>
</target>

Теперь при любых командах sencha (build, watch, refresh) проект будет пересобран на лету, весь исходный код приложения следует хранить в папке es6. Поздравляю, теперь вы можете двигаться в ногу со временем :)