CODEWITHSUNDEEP
javascriptnode.jsecmascript-6webstormbabeljs
Alon
Alon

Reputation: 11885

Babel doesn't seem to work

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!

Upvotes: 1

Views: 5102

Answers (3)

Filip Dupanović
Filip Dupanović

Reputation: 33650

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.

Upvotes: 1

lena
lena

Reputation: 93728

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

Upvotes: 2

nagyf
nagyf

Reputation: 869

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

Upvotes: 1

Related Questions