ECMAScript 6 in WebStorm: Transpiling

For some time now WebStorm has supported ECMAScript 6 (a.k.a. ECMAScript 2015), the future standard for JavaScript. While its 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).

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , , , . Bookmark the permalink.

115 Responses to ECMAScript 6 in WebStorm: Transpiling

  1. Habib says:

    Okay, so after Babel’s watch we will have following file structure:
    – index.js (original)
    – index-compiled.js (Babel)
    – index-compiled.js.map (Babel)
    Cool, but what is the idea?
    How to set up working project from compiled files after that?

    • Ekaterina Prigara says:

      Please see another configuration described in the blog post that places compiled files in a separate folder or consider using a build tool of your choice to build a working project. Whatever you prefer best.

  2. Greg M says:

    Would you please update the first Babel screenshot so that we can see the full arguments & output paths? Thanks

    • Ekaterina Prigara says:

      That are the default values for this type of file watcher.
      Arguments: –source-maps –out-file $FileNameWithoutExtension$-compiled.js $FilePath$
      Output paths to refresh: $FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map

  3. Kyle Yancey says:

    Is there any way to make this the default behavior for javascript files in all projects? Or create a custom project template?

    • Ekaterina Prigara says:

      WebStorm will prompt you to enable a Babel file watcher in every project with ES6 files. Unfortunately, you can’t enable file watchers by default.

  4. Rune Bjerke says:

    Just a small note, your blog engine whateveramajig is converting the two hyphens in sequence into a longer —, so every time someone copies and pastes from the example above it has to be corrected from — o u t – d i r to – – o u t – d i r (same for –source-maps)

    Also, I’ve done this N+1 times now: the last “out” parameter in the Babel line for “$FilePathRelativeToProjectRoot$ –source-maps –out-dir out” wraps to the next line, so I’ve accidentally not copied it and had to correct it afterwards. Might be helpful to put it on a separate line so clumsy-fingers like myself don’t do this? :)

  5. markd says:

    Has anyone setup the debugger with babel-node?

    • gabe says:

      +1 on this

    • Tyler says:

      I don’t think it is possible… Babel is a transpiler. It creates different source code. I use babel with webstorm and I have to debug the out files from babel.

      I could be wrong and someone is running native babel code, but I don’t think that is what Babel does.

    • Anthony Ettinger says:

      I am also wondering this. People say its possible to debug…but I don’t know if they mean use the webstorm node debugger with server side code using babel.

      I tried changing path to node to use babel-node and it crashes when I run the debugger. It works fine when I run babel-node server.js from the command line.

      • Ekaterina Prigara says:

        Hello Anthony, the trick with babel-node is that the source maps that we need for debugging (to map compiled files executed back to the original files) in case of babel-node are generated in memory and in a different way from “ordinary” source maps. We need to support them from scratch, here’s an issue: https://youtrack.jetbrains.com/issue/WEB-17151

  6. Matteo says:

    Is it possible to debug es6 code right now or only the compiled “old” js ?

  7. Logan says:

    Is it possible to use the ES6 and JSX features at the same time? Currently I get syntax errors if I use ES6 syntax within a JSX file.

  8. Michael Romanoff says:

    after I enable JavaScript ECMAscript 6 as on your 1 screen. I still have squiggly underlines all over. Restart WB didn’t help. It looks like editor still didn’t pick up ES6 syntax for some reason. I have Mac 10.10.4 and WS 10.0.4

  9. Leo Pelekh says:

    The issue with the file watcher approach is that one has to “require” the compiled “-compiled” files as node cannot execute ES6. This means that the ‘compiled’ files need to be checked in to repository and deployed. Am I missing something?

    Also for me I can only put break-points in compiled files (not ES6), though it does break in ES6 file.

    I feel that things would be much easier with babel-node debugging support.

    • Ekaterina Prigara says:

      File watchers can be good for testing out some ideas and debugging.
      You can set us your production build process using some popular build tools like Grant or Gulp. Moreover, you can configure file watcher to store your file in dist/build directory and then deploy that.
      For debugging you need to make sure that you have source maps.
      For node-babel support please vote for and follow: https://youtrack.jetbrains.com/issue/WEB-17151

  10. Andrew Willems says:

    Initially I could not get either the Babel or Traceur file watchers to work. I kept getting errors that ended with the following line: “env: node: No such file or directory”. I eventually found this web site that helped me solve the problem. I include my solution here just in case others encounter a similar problem. I had to copy my PATH variable to the clipboard (from, e.g., “echo $PATH” or from the .bash_profile file), go into WebStorm Preferences… > Tools > File Watchers, double click on Babel (which I had already previously created), click on the browse button (i.e. “…”) beside the “Environment variables” text box, click the “+” at the bottom, enter “PATH” in the lefthand “Name” column, and paste the copied PATH variable into the righthand “Value” column. The screen shots in your otherwise very helpful tutorial above show nothing in the “Environment variables” text box, so I still don’t know why I needed this filled in but you didn’t. Perhaps you could explain this apparent discrepancy. (e.g. Is there another place in Preferences where environment variables are set more generally rather than just for File Watchers?) Otherwise, thanks for showing how to get WebStorm to do ES6 transpiling…very useful!

    • Ekaterina Prigara says:

      Hi Andrew,
      Thank you for your feedback and advice to other users.
      Normally, WebStorm should understand your environment variable and use them to the IDE. Are you by any chance use nvm for managing you Node.js versions? Can you please check the output of nvm alias default command. If not, can you please send us your log file (menu Help – Show Log) by reporting a new issue here or using tech support form. Thanks!

      • Andrew Willems says:

        Yes, I do use nvm for managing my Node.js versions. In fact, I did just recently have problems with node/npm/nvm and ended up removing and re-installing all of them, so that may (or may not) have contributed to my problem. Again, if you could enlighten me on how using or not using nvm affects my ability to use WebStorm file watchers (or any other WebStorm tools), that would be greatly appreciated. (e.g. Is using nvm and WebStorm simultaneously problematic?) As for your other questions/suggestions, I get no output at all from nvm alias default. I just sent my log file to your tech support form, so maybe that will help your team.

    • linguokun says:

      Very thank you for your solution . I had encountered this problem. I wastes many hours, but now I solve it.

  11. llamerr says:

    Is there a reason why PHPStorm doesn’t have Babel support from the start? (only Traceur available)

  12. Santi says:

    Hi, is there any chance you guys could support experimental es7 features (https://babeljs.io/docs/usage/experimental/)? Syntax highlighting is working for some like object spreads and decorators but not for others like export extensions.

  13. Dino Chiu says:

    Hi, I’m trying to use the babel to watch the *.jsx files , And I’ve followed your guide to setting WebStorm as 1.Set the Languages & Frameworks | JavaScript | JavaScript language version, choose ECMAScript 6. 2.Add a file watcher for babel buy default arguments .
    But It’s still can not complier the *.jsx to *.js what WebStorm said the syntax was large glaring errors inside .
    I’m sure the syntax is ok , cause I’ve used the babel’s online verify those ….
    Could you help me ? witch setting did I miss ?

    • Ekaterina Prigara says:

      Sorry, I’m not sure I’ve understood correctly whether you got error from WebStorm or Babel? Is your code looks ok in WebStorm when you switched language version to JSX? Can you please provide more details and sample code. You can contact our tech support, that might be easier than to reply here.

  14. See here for a detailed step-by-step guide how to debug ES6 in Webstorm (11) using gulp:
    https://github.com/stefanwalther/es6-debug-webstorm

  15. How about giving an example of babel + webpack debugging ?

  16. Christopher Waldon says:

    I just spent a while trying to debug errors in Babel. I eventually realized that I had my javascript set to “Prefer Strict mode”, which apparently meant that Babel was being executed in strict mode. This may be a really dumb newbie mistake, since I’m relatively new to Javascript, but I thought I would share the experience in case anyone else has trouble configuring this. After changing the Javascript setting to no longer prefer strict mode, I did have to restart WebStorm to get Babel running properly.

  17. VIc York says:

    I have to be doing something wrong here. I’ve followed these instructions, but the file watcher isn’t triggering at all.

    • Ekaterina Prigara says:

      Please check the checkboxes in the file watcher configuration: the first two should be enabled. Please also check that you don’t have any syntax errors in the file reported by WebStorm. If you do, but still want file watcher to work, check “Trigger file wathcer regardless of syntax errors”.

    • Zheka Dzecina says:

      Hi Vic
      I had the same problem. You need restart your project in WebStorm

  18. Ferdinand Prantl says:

    Thanks for the hint how to configure the Babel watcher to build a structure below “src” into a separate “out” directory! However, a usual project with such JavaScript files does not place the “src” directory itself into “out”; just its content.

    For example, project sources:


    src/
    cards/
    Card.js
    players/
    Computer.js
    Human.js
    gulpfile.js

    The supposed build output:


    out/
    cards/
    Card.js
    Card.js.map
    players/
    Computer.js
    Computer.js.map
    Human.js
    Human.js.map

    You configuration sample will produce this:


    out/
    src/
    cards/
    Card.js
    Card.js.map
    players/
    Computer.js
    Computer.js.map
    Human.js
    Human.js.map

    Notice the extra “src” sub-directory in the “out” directory. Is there a way to set up the WebStorm’s Babel watcher to omit the “src”?

  19. Ferdinand Prantl says:

    The “code” tag does not preserve whitespace… Here once more the three directory structure samples from above, indented by underscores:

    For example, project sources:


    src/
    ____cards/
    ________Card.js
    ____players/
    ________Computer.js
    ________Human.js
    gulpfile.js

    The supposed build output:


    out/
    ____cards/
    ________Card.js
    ________Card.js.map
    ____players/
    ________Computer.js
    ________Computer.js.map
    ________Human.js
    ________Human.js.map

    You configuration sample will produce this:


    out/
    ____src/
    ________cards/
    ____________Card.js
    ____________Card.js.map
    ________players/
    ____________Computer.js
    ____________Computer.js.map
    ____________Human.js
    ____________Human.js.map

  20. Maurice says:

    Hi, is it already possible to debug babel-node in webstorm?

  21. Steven Schattenberg says:

    I’m using Intellij IDEA 14.1.5. I’ve followed these instructions and I still get the squiggly lines under any ES6 code. I also do not see the file watcher menu. What am I doing wrong?

  22. Calvin Lee says:

    In my case it does not work when setting “program” as (on the “Edit Watcher” window):
    pragram: …\myproject_folder\node_modules\.bin\babel

    After I change to “babel.cmd”, the problem has been solved.

    (Windows 10, WebStorm 11)

  23. Jen says:

    Heya! My WebStorm is working great with arrow functions. However, when I try to use default parameters I get a

    SyntaxError: Unexpected token =

    Please help :(

  24. Brian says:

    So I’m trying to make the jump from Sublime to IntelliJ, and as you might expect it’s been a bit of a process. There are currently two issues that I’m having with this transpilation process in WebStorm.

    First, is that it’s much cleaner to transpile into a dist directory that mirrors your src directory, and File Watchers with babel-cli don’t make this possible as it currently stands. This is because using --out-file with babel-cli doesn’t create directories automatically, and there’s no way to get it to mirror the structure. Currently I’m just using npm scripts (babel src -d dist --watch) to get the desired behavior, but it’d be nice if it were baked into File Watchers.

    Second, IntelliJ doesn’t seem to understand how to resolve ES6 modules, so code completion is broken when using transform-es2015-modules-commonjs. Coming from Sublime, I used TernJS which has an es_modules plugin which resolves all of this fine. Consider adding support for resolving ES Modules, since many of us want to standardize on a single module syntax when writing server / client code, and ES6 modules are (obviously) going to be a thing.

    Thanks

    • Brian says:

      The second bit back: I didn’t have node core enabled for the project.

    • Ekaterina Prigara says:

      Hello Brian,
      Thank you for your feedback.
      You can specify whatever command line option you need in the arguments field of the File watcher. You can remove -out-file parameter and configure it to put all files in one folder.
      Having Babel configured via npm scripts is also a good option for compiling ES6.
      WebStorm understands ES6 imports and provides code completion and navigation for them: please make sure that ECMAScript 6 is selected as a JavaScript version in Preferences – JavaScript. If it doesn’t work for you, please send us a code sample or screenshot and provide a bit more details.

    • Ekaterina Prigara says:

      Actually found a more detailed example on setting up File watcher to put all the output in one folder: http://mcculloughwebservices.com/2015/12/10/webstorm-babel-6-plugin/

  25. Lau Chung says:

    How do you minify with Babel 6 in phpstorm?
    babel-plugin-uglify doesn’t support Babel 6.
    I just installed
    member-expression-literals
    merge-sibling-variables
    minify-booleans
    property-literals
    simplify-comparison-operators
    but not enough for minification.

  26. Darren says:

    On googling how to get Webstorm to resolve ES6 paths that had been configured in Webpack
    i.e.
    resolve: {

    modules: [path.resolve(‘src’), path.resolve(‘node_modules’)],

    }

    This page came up first, but I found the following solution to work:
    http://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm

    Basically in Preferences > Directories – Add your desired folder e.g. src as a Resource Root

  27. Vladislav says:

    Just wanted to say thanks for owner of the article. Pretty useful and helpfull!

  28. Eduardo Alvarez says:

    Hi i can’t run the file watcher there’s an error #13 “access denied” when I try to run it. I’m on Mac OS X El Capitan 10.11.6 and PyCharm 5.0.4

  29. Jeff Gomez says:

    I appreciate the hard work you put into this article, I really do. The article was detailed enough to encourage me to invest a few hours trying to follow and reproduce it, but in the end it lacked sufficient detail required to successfully establish the feature (namely ES6 syntax support in the IDEA). I really wish I had not found the article, it was an exercise in futility and I lost hours of productivity for nothing.

    It’s unfortunate, because I believe IntelliJ has a lot of potential, however when plugin support is this difficult to configure it badly degrades the usefulness of the entire IDE (I could’ve kept using Eclipse for free to get same level of Javascript support).

    • Ekaterina Prigara says:

      Sorry to hear that! Would be very helpful if you could provide at least some details on the problems you encountered.
      ES6 syntax support can be enabled in Preferences | Languages & Frameworks | JavaScript, that’s the only thing required to start working with ECMAScript 6 projects in IntelliJ IDEA..

  30. Henrik says:

    After updating my Webstorm install to version 2017.1 I suddenly can’t run my code that contains arrow functions.

    I get an syntax error saying “Unexpected token” for the arrow function.

    Node.js version is 6.10.0, npm is 4.4.1 and I have ticked the box Ecmascript 6 as in your article.

    I have also tried to Invalidate the cache/restart without success.

    Can anyone advice me further?

  31. Igor says:

    phpstorm
    Sees other methods!
    http://f4.s.qip.ru/188zyAODf.png

  32. Javier Martínez says:

    Hello:

    In the past I was able to inspect ES6 Map objects using Debugger. But now when I debug server-side only ES6 code with Node.js 6, if I click on any variable which is a Map object only __proto property is showed. No Map values.

    Should I have to configure anything?. My workaround is to create a new variable watch with this code: […map.values()] but this worked in the past without workarounds.

    Thank you

    Regards

    • Ekaterina Prigara says:

      Hello,

      What WebStorm version do you use? It seems that the issue should have been fixed in WebStorm 2017.1: https://youtrack.jetbrains.com/issue/WEB-21216

      • Javier Martínez says:

        Hello Ekaterina:

        WebStorm 2017.1.1
        Build #WS-171.4073.40, built on April 11, 2017
        JRE: 1.8.0_112-release-736-b16 x86_64
        JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
        Mac OS X 10.11.6

        Thanks

        • Ekaterina Prigara says:

          It seems that the issue I’ve linked to was only fixed for the Node.js version 7+. Sorry for not saying that earlier. Do you plan to continue using Node.js 6? Should we report an issue for better support in Node.js 6? But to be honest, with Node.js 8 being released so soon it doesn’t seem very likely that we will support debugging maps in Node.js 6.

          • Javier Martínez says:

            Hi,

            Tested for node 7.9.0 and not working either. Create Node.js project from the scratch and just a few lines of code creating and adding values to Map object. If I debug, Map object inspection is empty except for __proto__ subobject.

            Have you tested that this functionality works?

            Thanks

          • Ekaterina Prigara says:

            Yes, sure we have tested that. Here’s a screenshot showing a debugging with Node.js version 7.9 in the latest WebStorm: https://blog.jetbrains.com/webstorm/files/2017/04/debugging-maps-in-node.png
            Can you please share a screenshot showing your example. Thank you!

          • Javier Martínez says:

            Hello Ekaterina:

            Any update about my last comment?.

            Thank you

            Regards

          • Ekaterina Prigara says:

            In my previous comment I’ve asked you to share a screenshot with your example, so I was waiting for it.

          • Javier Martínez says:

            Hello Ekaterina:

            I answered your comment on April 28. You can see it as the last comment of this post (sorry I got it wrong when clicking on Reply): https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/#comment-293143

            Anyway, here you have the screenshot but using Nodejs.js REMOTE Debug.
            https://drive.google.com/file/d/0B6pCXqcLCV-UaW8wZ040WHdwN3M/view?usp=sharing

            Thank you

            Regards

          • Ekaterina Prigara says:

            Thanks for the reply. Sorry that we’ve missed it earlier.
            The fact that you were using a remote debug configuration was critical here and we were able to reproduce the issue with Node.js v7.9 and v7.10. However, we do not plan to fix this issue for these versions. The reason is that the Node.js Remote configuration requires the use of the old Node.js debugging protocol that is now deprecated. WebStorm and Node.js 6.4+ support a new recommended Chrome Debugging Protocol. To use it you need to run your application with the --inspect-brk= flag instead of --debug-brk= and then connect to the process using the Chromium Remote debug configuration in WebStorm.

  33. Javier Martínez says:

    Hello again:

    After watching your screenshot I have realised that you are using Node.js debugging. I didn’t mention that in my case I am using Nodejs.js Remote Debug.

    I have tested Node.js v7 with normal debugging and it works properly. But the same with remote debugging is not working.

    Should it work? Maybe is another bug?. Or you don’t have this feature?. I would swear that this worked sometime in the past.

    Thank you

  34. Dave Schinkel says:

    And now create-react-app just broke your test instructions above, yay! Great job FB. Some of us prefer mocha over jest. But create-react-app only works with Jest. Therefore, due to the fact that react-create-app has this wonderful “magic” in the react-scripts in that project, You can’t just add a .babelrc file anymore or use node-babel with WebStorm test configs for mocha due to this if your team wants to use create-react-app vs. just creating a custom React config, which to me isn’t that hard especially with npm scripts instead of using Gulp or Webpack.

  35. Julian Wilson says:

    I would like to add that you should be careful which JavaScript you choose to run in your Node configuration! For some reason, you can choose an ES6 file and it will hit breakpoints fine but the reloading will not work properly. If you just select your transpiled ES5 module it will work fine though.

  36. Chris Wolcott says:

    I am having a problem setting up a File Watcher to perform exactly what I want to do. Here is the current directory structure.

    public
    modules
    charts
    js
    abc.js
    abc.js.map
    mno.js
    mno.js.map
    xyz.js
    xyz.js.map
    source
    abc.js
    mno.js
    xyz.js

    I have set up a scope to only include the file[myProject]:public/modules/charts/source/*

    My current File Watcher will transpile all files from source and add them to the js directory not just the one I am editing.

    File Type: Javascript
    Scope: {The one defined above}

    Program: /Users/wolcottce/PhpstormProjects/myProject/node_modules/.bin/babel
    Arguments: $FileParentDir$/source –out-dir $FileParentDir$/js –source-maps –presets env
    Output paths to refresh: js/$FileName$:js/$FileName$.map

    Working Directory: $ContentRoot$

    I believe that using $FileParentDir$/source in the arguments is causing all files to be transpiled. If I change $FileParentDir$/source to $FilePathRelativeToProjectRoot$ only the currently modified file is transpiled, but it is placed in the following directory hierarchy:

    public
    modules
    charts
    js
    public
    modules
    charts
    sources
    abc.js
    abc.js.map

    Any suggestions on how to have only the current file that was edited and saved to be transpiled by the File Watcher and placed in the correct directly or am I misunderstanding how File Watcher works?

    • Chris Wolcott says:

      Sorry the directory hierarchies aren’t indented properly.

    • lena_spb says:

      I believe that using $FileParentDir$/source in the arguments is causing all files to be transpiled

      Yes – you are passing a directory to compiler, so all files in it are transpiled.

      You can try the following configuration:

      Arguments: $FileName$ –out-dir $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$ –source-maps –presets env
      Output paths to refresh: $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$\$FileNameWithoutExtension$.js:$ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$\$FileNameWithoutExtension$.js.map
      Working Directory: $FileDir$

      When using this setup, public/modules/charts/source/components/subdir1/comp1.js will be transpiled to public/modules/charts/js/components/subdir1/comp1.js. Is it a solution you are looking for?

      • cwolcott says:

        Thank you very much for your response. I have a couple of problems with the suggestion. But lets tackle the first issue.

        1) Arguments: $FileName$ –out-dir $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$ –source-maps –presets env

        When the file watcher executes it can’t find the $FileName$ “abc.js”. It exists in public\modules\charts\source.

        I have change Show console: Always so I can see the output.

        When I define the following:

        Arguments: $FilePathRelativeToProjectRoot$ –out-dir $FileParentDir$\js –source-maps –presets env

        The console shows (Below are the real directories instead of my examples):
        /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/node_modules/.bin/babel
        public/modules/sysbio/clinical/source/dashboards.js
        –out-dir /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js
        –source-maps –presets env

        So this looks correct. It will be transpiling dashboard.js from the public/modules/sysbio/clinical/source directory and attempting to put it in /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js

        But the next line of output shows:
        public/modules/sysbio/clinical/source/dashboards.js -> /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js/public/modules/sysbio/clinical/source/dashboards.js

        Again the file being transpile is correct but the output haas the correct path with the input path added to it.

        Could this have something to do we how my scope is define?

        • lena_spb says:

          When the file watcher executes it can’t find the $FileName$ “abc.js”. It exists in public\modules\charts\source.

          Did you change Working Directory to $FileDir$ per my suggestion? Seems you are still using $ContentRoot$

  37. cwolcott says:

    Sorry, you are correct. I changed the Working Directory to $FileDir$. So the console now shows the command being executed as:

    /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/node_modules/.bin/babel dashboards.js –out-dir /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js –source-maps –presets env

    But I now get the following error that all the commands after the filename do not exist:

    –out-dir doesn’t exist. /Users/wolcottce/PhpstormProjects/SysBioCube-Migration\public\modules\clinical\js\ doesn’t exist. –source-maps doesn’t exist. –presets doesn’t exist. env doesn’t exist

    Here is the Arguments: $FileName$ –out-dir $ProjectFileDir$/public/modules/sysbio/clinical/js –source-maps –presets env

    • lena_spb says:

      Looks like a copy/paste issue. Please re-type all options (--out-dir, --source-maps, --presets), make sure that each option name starts with 2 dashes

  38. cwolcott says:

    Thank you lena_spb. You were exactly right. I starred to much at the screen and did not see that I was missing the extra dashes. The cut and paste was the problem.

    Everything is working perfectly to transpile 1 file at a time after it has been saved if it is within the defined scope.

    My last question is what does the “Output paths to refresh” parameter do?

    • Ekaterina Prigara says:

      As it’s mentioned in the blog post, the IDE will watch these paths for external changes and make sure that the changes are synchronized with the project.

Leave a Reply

Your email address will not be published. Required fields are marked *