1

I have a project built in WebStorm 2016.2.2, Node.js 6.6.0 and TypeScript 1.8.

For some reasons, which are specified here: ES6 import and export are not supported in Node.js, I need to use Babel.

I have installed Babel and babel-preset-es2015 and I have added a file watcher, but I'm still getting an "unexpected token import" error. It looks like babel doesn't work.

1) Do I need to take an additional action in order to transpile my js files to ES5?

2) What version of ES should I set the "JavaScript language version" to in WebStorm settings?

3) Is Babel supposed to generate another file with the output as TypeScript compiler does?

Any help will be profoundly appreciated!

Community
  • 1
  • 1
Alon
  • 10,381
  • 23
  • 88
  • 152

3 Answers3

2

here are the Babel file watcher settings that work for me:

Arguments: $FilePathRelativeToProjectRoot$ --out-dir $ProjectFileDir$/dist --source-maps  --presets es2015
Working directory: $ProjectFileDir$
Output Paths to Refresh: $ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js.map

it compiles files to separate directory, preserving original file names, so that require() work; also, WebStorm is aware of generated files, as file system is correctly refreshed once the compilation completes

lena
  • 90,154
  • 11
  • 145
  • 150
1

1) Create a file called .babelrc in the root directory of the project, with the following content:

{
  "presets": ["es2015"]
}

It is not enough to install the es6 preset, you have to tell babel to use that preset. For reference: https://babeljs.io/docs/plugins/preset-es2015/

2) Try setting ECMAScript6

nagyf
  • 859
  • 5
  • 17
  • Just tried it, and still getting the same error unfortunately :-( – Alon Oct 07 '16 at 12:29
  • How are you running babel? Try it in the console, cd into the root directory of your app, and run: `babel script.js --out-file script-compiled.js` (of course you have to change the file names). Is it working? – nagyf Oct 07 '16 at 12:33
  • Did you change the javascript language version in Webstorm to ECMAScript 6? You should do it – nagyf Oct 07 '16 at 12:37
  • Just fyi, you can also add all settings from .babelrc to your package.json file like `"babel": { "presets": ["es2015"], "plugins": ["transform-runtime"] }`. – Jonathan Nielsen Oct 07 '16 at 12:38
  • Yes I did set the lang version to ES6. Just tried to run the command you had suggested from terminal, and got this message: "The program 'babel' can be found in the following packages: * babel-1.4.0 * openbabel Try: sudo apt-get install ". – Alon Oct 07 '16 at 12:46
  • 2
    Install babel globally, i.e. run `npm install -g babel-cli`. If you've already installed it, maybe it isn't in the PATH of your operating system. For more information look at the link in my answer. If you installed it locally, it will be in the `node_modules` directory of your project. so try running it like this: `node ./node_modules/babel-cli/bin/babel.js` – nagyf Oct 07 '16 at 12:50
  • I've installed it globally and now it works and has generated a transpiled file, but it feels too clumsy, first of all because WebStorm doesn't aware to the new file that has been generated, second because I need to manually transpile every file I change, third because now the file name is different than the ts file one so TypeScript is useless. I've voted up because your help did make Babel work, but I need a better solution that will work a lot more smoothly. – Alon Oct 07 '16 at 13:22
1

Do not use babel-preset-es2015 for Node.js 6. This will transform your sources to ES5, whilst you already have 97% support for ES6 natively, causing severe performance penalties. Merely adding it doesn't enable module transformation either.

Use the babel-preset-node6 preset or just add the transform-es2015-modules-commonjs plugin.

Filip Dupanović
  • 32,650
  • 13
  • 84
  • 114