Добрый день, мир не стоит на месте, в прошлом году состоялся релиз 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 

Console output

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

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. Поздравляю, теперь вы можете двигаться в ногу со временем 🙂

ссылка на оригинал статьи https://habrahabr.ru/post/281240/