Results 1 to 2 of 2

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

  1. #1

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

    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):
    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:

    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)

    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.

  2. #2
    Sencha User
    Join Date
    Feb 2013


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

Similar Threads

  1. Replies: 2
    Last Post: 15 Oct 2014, 6:45 AM
  2. [FIXED] Broken links in 2.3.1 docs "Using Sencha Cmd..." guide
    By ccg in forum Sencha Touch 2.x: Bugs
    Replies: 1
    Last Post: 26 Mar 2014, 4:44 PM
  3. Replies: 1
    Last Post: 10 Jan 2013, 8:23 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts