At my work, we use ExtJS for our frontend, and Express+NodeJS for our backend. This year, we have moved towards using ES2015 in our backend NodeJS code, since there’s better support for it. In our frontend code though, we have been limited to ES5, because Sencha hasn’t added support for ES2015 yet. I finally got around to integrating Babel so that we could use ES2015 consistently. Here are the steps we followed:
* Install babel-cli and es2015 preset in the project folder. Setup package.json first if you haven’t already done so (using npm init).

1
2

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

• Create .babelrc and configure your babel settings

1

touch .babelrc

My .babelrc looks like this

1
2
3
4
5

{
  presets: [
    ["es2015", { "modules": false }]
  ]
}

• Make a copy of your ‘app’ folder:

1

ditto app app_es6

• Create npm scripts to run babel. Add something like this in your package.json:

1
2
3
4

  "scripts": {
    "build": "./node_modules/.bin/babel app_es6 -d app",
    "watch": "./node_modules/.bin/babel app_es6 -d app --watch"
  }

If you have more than one folder to transpile, you can use the concurrently npm package to run multiple babel commands simultaneously.
* If you are using git and want to stop tracking your ‘app’ folder now, then you can do that using

1

git rm -r --cached app

• Now you can develop locally by using the npm run watch command, which will watch for file changes and automatically transpile the changed files. Before building your ExtJS code for deployment, you want to run npm run build (probably on your build server).