[GUIDE] A how to for "integrating" Sencha Cmd with Babel to leverage ES6 features

[Milosious]

I've got Sencha Cmd managing conversion of ES6 files to ES5 compatible files using Node's Babel transcompiler with a pretty decent amount of "integration".

In English: This allows you to use the latest Javascript features whilst maintaining backwards compatibility with older browsers (and not to mention making Sencha Cmd be ok).

A lot of credit to Trevor Brindle for leading the way.


What you'll need:
* Sencha Cmd installed
* Node JS (and thus npm) installed
* Ext JS


1. Generate a your application (if not already done so):

https://docs.sencha.com/cmd/guides/extjs/cmd_app.html

2. Find app.json, open it up for editing and add the following (at the top level of the json config object):

/**
 * CUSTOM: The relative path to the ES6 containing directory
 */
"es6SourcePath": "src/main/javascript",

3. Move files!

a. Assuming your using some standard Java/Maven project layout, make sure the directory src/main/javascript exists within your project directory.

b. Then, move the following Sencha Cmd generated directories and index.html, as shown below, from your project root into src/main/javascript (or wherever you specified above in app.json):

file layout.jpg

c. Note the new "provided" directory under resources. Create this directory now as above - you can then use it for javascript files that you don't want ES6 BabelJS conversion on. We'll be using it for babel's polyfill later.

4. Add supporting files!

Download and add the following files (extract) to the root directory of your project:
resource_files.zip

It contains:
* .bashrc - Tells babel how to transcompile from ES6 to ES5
* es6-build.xml - Apahe Ant instructions for use with Sencha Cmd that helps automate npm (node)
* package.json - Tells npm (node) how to use babel, handles babel dependencies
* resources/provided/polyfill.min.js - Babel's polyfill to add missing ES6 functionality to old browsers

5. Find and open build.xml for editing
Add the followings lines underneath <import file="${basedir}/.sencha/app/build-impl.xml"/>

<import file="${basedir}/es6-build.xml"/>
<target name="-before-build" depends="jswillcompilewarn, npm_install, npm_run_build"/>
<target name="-before-clean" depends="npm_clean"/>
<target name="-before-watch" depends="npm_watch"/>

6. Find and open index.html
Add the following line below the title tag (or wherever you like, but before ExtJS's stuff):

<script type="text/javascript" src="resources/provided/polyfill.min.js"></script>

7. Optionally, add the following to your .gitignore file, if using GIT versioning:
(If using Intellij Idea, considering install the ".ignore" IDE plugin as this will make it much easier to see what files are and are not relevant to your development)

/node_modules/
/npm-debug.log
/npm_watch.log
/sass/
/modern/
/classic/
/resources/
/app/
/bootstrap.js
/classic.jsonp
/classic.json
/bootstrap.css
/modern.jsonp
/modern.json
/build/

That should be it! Simply run: sencha app build
You can also run sencha app watch - It will run the watcher for ES6 babel too, outputting the result to npm_watch.log at the root of your project, which you can then tail in another tab.

Sorry in advance if anything is wrong. It's 3am, so I won't test this guide until tomorrow at the earliest.

[Gary Schlosberg]

Nice work, and thanks for sharing your guide with the community!