Good day, the world is not in place, last year ECMAScript 2015 was released (it’s also called ES6), which introduced many innovations , only one ExtJS and Sencha are upsetting, they have not yet learned how to support this specification. The reasons for developing an application now taking into account ES6 are many. The main I see is the study of a new standard (your market competitiveness is increasing) and the creation of a simpler and more concise code that pleases the eye. This article shows the process of adding the ability to write ES6 code for ExtJS using the Babel cross-compiler with on-the-fly build.

Babel setting

First we need to create a test application.

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

We also need npm to install Babel. In the root directory of the created application, create a package.json file using the command

 npm init 

After answering some questions, the file will be successfully created, then you need to install the cross-compiler itself and the plug-ins to it.
')

 npm install babel-cli --save-dev 

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

Next, you need to add project build commands, for this we add the scripts section to package.json. Just do not forget to add plugins for Babel, without them from simply will not work, for this we add the section 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 setting

From the ExtJS project side, you need to transfer the app.js file from the project root to the app folder. Next, the app folder must be renamed to es6.

 mv app.js app mv app es6 

Remember to include the new app.js location in the app.json file.

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

The last step remains, we will edit the build.xml file in the project root, adding the following construction to it inside the project tag

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

Now with any commands sencha (build, watch, refresh) the project will be rebuilt on the fly, all the source code of the application should be stored in the es6 folder. Congratulations, you can now keep up with the times :)