How To Set Up the Babel 6 Plugin in WebStorm

The latest version of Babel, the ES2015 transpiler, is out and there have been enough changes that I’ve decided to revise my original blog post, “How To Set Up the Babel Plugin in WebStorm”. At the time of writing, Babel is on version 6; my original post was written for Babel 5.

The new version of Babel is taking a bit of a kitchen sink approach. From the Babel 6 announcement, “…we decided that Babel wasn’t just going to be a ES6 transpiler. Instead, it needed to become a platform. A suite of tools designed to create the next generation of JavaScript tooling.” It’s an interesting approach and I’d like to see how it works in practice. I kinda like the idea of being able to configure all of my linters, transpilers, etc in Babel rather than setting up separate Gulp tasks.

I’ve also changed my standard directory structure. I now prefer to organize code into a src/ directory that is compiled to a dist/ directory. So my examples will reflect that.

Installation

Note, a lot of the following info on how to install Babel was taken from the blog post on the Babel site.

First off, you’ll want to make sure that you have the new Babel 6 CLI installed (note, I had to use sudo to run this command but that may be different on your system):

$ npm install -g babel-cli

Next, you’ll want to install the Babel plugins in your dev directory. It appears that plugins are available for each of the new JavaScript features. So, if you really know that you’re only going to use Arrow functions, you could just install that one plugin:

$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions

Since it’s unlikely that you’d want to individually specify individual JavaScript features (and some features have dependencies so you’d have to know to install those as well), Babel 6 allows you to install groups of features as a Preset. For example, you can install all of the ES2015 plugins together using:

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

Note, the recommended practice is to install the Babel 6 CLI globally but install the presets and plugins locally. Not sure if this is required or just recommended. Theoretically, it would give you the option to change up your presets and plugins with each project.

Configuring Babel

Once you have installed your plugins and presets, you need to create a .babelrc file in the root of your project so that you can enable the plugins/presets.

To enable a plugin:

{
  "plugins": ["transform-es2015-arrow-functions"]
}

To enable a preset:

{
  "presets": ["es2015"]
}

Setting up Babel 6 in WebStorm

At this point, Babel 6 is installed and should be ready to work if you manually run it. However, if you’re using the WebStorm IDE, it makes sense to set up Babel 6 to run each time you edit a file.

The rest of this blog post assumes you’re using the following directory structure for your project:

  /
    .babelrc
    .gitignore
    README.md
    package.json
    dist/
    src/

The steps are pretty much the same as in the previous post, but I’ve edited them a bit to reflect the new directory structure:

  1. Create a Scope
    WebStorm screenshot: Adding a new scope

    1. Name the Scope
      WebStorm screenshot: Naming a new Scope
    2. Add files to the Scope
      WebStorm screenshot: Adding files to a Scope
  2. Set JavaScript version to ECMAScript 6
    WebStorm screenshot: Change JavaScript version
  3. Add the Babel file watcher
    Configuring Babel File Watcher

    1. Set the arguments
      $FileDirRelativeToProjectRoot$ --source-maps --out-dir dist/$FileDirPathFromParent(src)$

      1. FileDirPathFromParent(src) gives you the path from the specified parent directory, in this case, src/, to the current directory
    2. Set the Working Directory
      $ProjectFileDir$
    3. Set the Output Path to Refresh
      dist
    4. Set the file scope to the scope you created earlier
  4. Files will now be transpiled to ECMAScript 5 in the dist/ directory

Code Sample

If you’d like an example of how I set up my directory structure and the contents of the .babelrc file, check out my Github repo:
https://github.com/gwmccull/babel-6-example

Warning on Arguments

Warning: Do NOT use the --out-file option when setting up the file watcher. When you do this, the file watcher will run on directories that have not been created in the dist/ directory. Since these sub-directories have not been created, BabelJS will throw the following error (included here so other people can find this blog post):

Error: ENOENT: no such file or directory, open '/Users/gmccullough/Documents/Projects/babel-6-example/dist/app/app.js.map'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.writeFileSync (fs.js:1161:15)
    at output (/usr/local/lib/node_modules/babel-cli/lib/babel/file.js:81:12)
    at walk (/usr/local/lib/node_modules/babel-cli/lib/babel/file.js:135:5)
    at files (/usr/local/lib/node_modules/babel-cli/lib/babel/file.js:139:5)
    at module.exports (/usr/local/lib/node_modules/babel-cli/lib/babel/file.js:161:5)
    at Object.<anonymous> (/usr/local/lib/node_modules/babel-cli/lib/babel/index.js:124:1)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)

7 Comments

  1. manders on December 15, 2015 at 4:02 pm

    Nice writeup that actually works in WebStorm 11 !

    • Garrett McCullough on December 15, 2015 at 8:30 pm

      Thanks! I’m glad it helped you.

  2. Jon on January 25, 2016 at 2:39 pm

    This is great!

    Have you done any unit-testing in this environment? I would be interested to see what can be done from a TDD perspective and how to get it setup.

    • Garrett McCullough on January 25, 2016 at 7:05 pm

      Glad you liked it.

      I haven’t used TDD with Babel yet.

      You’d want to make sure that you configured your test package to run after the transpilation completed.

      It looks like there are some packages that may help with that. I haven’t used it but I found a package that’s meant for running Jasmine from within Babel that may work:
      https://github.com/vinsonchuong/jasmine-es6

  3. Sergiu Neamt on March 4, 2016 at 10:14 am

    Haleluia !
    Thanks man, you save my weekend ! I tried many hours after working day but no luck, it’s friday night and I cheers you with ca glass of merlot !

    • Garrett McCullough on March 4, 2016 at 4:03 pm

      Glad I could help! Thanks for reading.

  4. Javier on October 6, 2016 at 5:47 am

    Thanks for that last warning! It was exactly the problem I was having.

Leave a Comment