Webstorm ES6 Turn ES5

A word summary: using Webstorm's own file Watcher function +babel to achieve automatic conversion ECMAScript 6 code for ES5 code

1.

Create a new empty Project, and then create a new main.js in the SRC directory;

This step is not necessary, just get started. It will be much less disruptive to start your own configuration from an empty project.

2.

Enter settings to change JavaScript language version to ECMAScript 6;

3.

And then. Write a section of ES6 code

'Use Strict';//node runs the ES6 code directly, such as using some ES6 keywords, such as let, need strict mode, otherwise it will error//This is not a strict mode when the error prompt//syntaxerror:block-scoped declarations (let, const, function, Class) is not yet supported outside strict modefunction* FIBS () {//Generator FunctionLet A =0; Let B=1;  while(true) {        yieldA; //[A, b] = [B, a + b];b = A +b; A= B-A; }}let [First, second, third, fourth, fifth, sixth]=fibs (); Console.log (first, second, third, fourth, fifth, sixth);

4.

The IDE now appears with a file watcher Cue bar

Don't order the add watcher! first. We're going to install babel~ first.

• First create a new Package.json in the root directory

  {  "name""test-project",     "version""1.0.0"}

• Then open the IDE's terminal, install BABEL-CLI

  NPM Install--save-dev BABEL-CLI

  good! Now you can go to dot add Watcher, and then a box will pop up, and most of the settings IDE will help you get it done.

• In the third line below, program that item, fill in (actually choose babel.cmd)
  

  $ProjectFileDir$/node_modules/.bin/babel

  Then click OK, and you'll find a main-compiled.js file on the left.

• But it's not done yet! Now just take care of the automatic conversion function, the system by default ES6 compile into a ES6. (You should have found that the compile came out the same as the original.) Generator function is not converted to ES5 format)

So we need to install Babel preset to correctly identify the ES6 code;

NPM Install--save-dev babel-preset-es2015

• Create a new. babelrc file under the root directory (that is, Babel in the current project's profile), write

  {  "presets": [    "es2015"   ]}

　　

OK, fix it! Save and then go back to see main-compiled.js should be like this, now you in main.js directly write ES6 code, the IDE will automatically compile into ES5 code here ~

Webstorm ES6 Turn ES5