GrabDuck

ECMAScript 6 in WebStorm: Transpiling | WebStorm Blog

:

For some time now WebStorm has supported ECMAScript 6. This support actually includes not only the ECMAScript 2015 standard, but also the 2016 and 2017 standards and even some proposals to the language, for example, import(). While these features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still need to compile it to ES5.1, the current version of JavaScript.

In this blog post we’ll have a look at some of the options that WebStorm offers to help you with this task.

But first things first: set ECMAScript 6 as the JavaScript version in WebStorm’s Preferences (Languages & Frameworks | JavaScript). And if you’re using React, select React JSX as your language version.

js-version

WebStorm will start providing smart coding assistance for ES6 and some of the latest proposals, including code completion, on-the-fly inspections, navigation for modules and classes, and more.

es6-code

At the moment Babel is the most commonly used transpiler. You can configure and use it via WebStorm’s File watchers. This approach is good for compiling files on the fly for some experiments and debugging (note that for the client-side code you may still need some additional such as module bundlers). For production-ready code, it might be worth using Babel in your build process with Webpack, Grunt, Gulp or npm — and WebStorm can also help you here too.

In this blog post:

Setting up Babel File watcher

File watcher is a WebStorm built-in tool that allows you to automatically run some command-line tools on file changes. For Babel WebStorm has pre-configured File watchers. Let’s see how to enable it.

Install Babel CLI in your project via npm:

npm install --save-dev babel-cli

Now go to Preferences | Tools | File watchers, click + button and select Babel file watcher from the list.

add-watcher

In the File watcher configuration, specify the path to Babel CLI in the project node_modules folder (e.g. node_modules/.bin/babel on OS X). On Windows it has to be an exe, bat, or cmd file.

In addition to that, you need to install Babel 6 preset for transpiling ECMAScript 6 locally in your project (for JSX you need babel-preset-react plugin instead). To do that open the Terminal at your application root directory and run:

npm install babel-preset-env --save-dev

All other Watcher settings are predefined, so it is now ready to use. With this default setup in WebStorm 2017.1, compiled files will be located in the dist folder.

babel-fw-new

Of course, you can modify the configuration or add more compilation options to the .babelrc configuration file to better fit your project needs.

Configuring File watcher

Here’re the settings that you can modify in the File watcher:

File type — specify the file type that the watcher will “watch” for you and run the program. If you’re using file extensions .es6 or .jsx, select ECMAScript 6 or React JSX respectively in the drop-down list.

Scope — select the scope the watcher will “watch.” By default the scope includes all project files; however, you may want to exclude your test files or some other files that you want to edit without triggering the watcher. You can create a new Scope and set the exclusion rules in Preferences | Appearance & Behavior | Scopes.

Arguments — this is where you can specify the options for Babel CLI.
With the default configuration in WebStorm, the generated ES5 files and source maps will be saved in the dist folder in the project root. The file names and their parent directories will be preserved.

Working directory (under Other options) — the directory where the program is executed. By default that’s the directory of the file.

Output paths to refresh — in this field you should specify the path to the compiled files (it could be a directory where the files are saved or the files themselves, separated with colon). The IDE will watch these paths for external changes and make sure that the changes are synchronized with the project.

Visit WebStorm’s Help portal for more details on File watchers.

Setting up task runners: Grunt and Gulp

As mentioned earlier, you can set up Babel as a task for your build tool or task runner. Since WebStorm provides integration with Grunt and Gulp, you can start the task for traspiling your ES6 files from the Show tasks window.

grunt-tool-window

Read about using Babel with Grunt or Gulp.

Make sure the project’s gruntfile.js (or gulpfile.js) is ready and all the required dependencies are installed (as well as the task runner itself). Then press Alt+F11 to see Run Grunt/Gulp task popup or open Grunt or Gulp tool window, select the task for transpiling you’ve created, and double-click it or press Enter to run.

run-grunt-task

You can create a new Run configuration for your task and start it with the Run… action (Ctrl-Alt-R on Mac or Crtl-Shift-F10 on Windows and Linux).

Using ES6 in Node.js

When you’re developing a Node.js application in ES6, the best way to run and test it is using babel-register.

  1. Make sure you have babel-cli (babel-register is installed as it’s dependency) properly installed in your project.
  2. In your Node.js run/debug configuration in the Node parameters field add: -r babel-register. Don’t forget to specify the path to the JavaScript file you’d like to run.
  3. Save configuration and hit run or debug.

Alternatively (but we would recommend babel-register) , you can use babel-node (which is also a part of the babel-cli module). To use it, you need to specify the path to the babel-node executable (in the .bin folder on macOS, .cmd or .exe file on Windows) in your node_modules folder in the Node interpreter field in the Node.js run/debug configuration.

Enabling source maps for debug

If you’d like to debug your code using WebStorm or Chrome, make sure the tools you’re using generates source maps. For example, when using Babel only, you need to add "sourceMaps": "both" option to your .babelrc file or pass it as a command-line argument.
If you’re using Babel as a part of a more complex build process, you might need a addition configuration for generating source maps, e.g. use gulp-sourcemaps with Gulp or add devtool: "source-map" option when using Webpack.

Source maps allow you to put breakpoints in the original source files in the IDE and be sure that they are hit then compiled code is executed in the browser.

Apart from choosing a transpiler, there are some other choices you need to make to start using ES6, like choosing a module system. We recommend consulting Axel Rauschmayer’s excellent blog post on Deploying ES6.

Develop with pleasure!
– JetBrains WebStorm Team