Webstorm ES6 Syntax support settings &babel use and automatic compilation

First, syntax support settings

Preferences > Languages & Frameworks > JavaScript

Second, Babel installation

1. Global Installation

Install -G babel-cli

2, the current project, applicable to the use of different Babel version of the situation

Install --save-dev babel-cli

Iii. Basic usage of Babel

--out-file or---out-file---out-dir or---out-dir ---  D lib-s

Iv. use of Babel in Webstorm

0. Create a new Test.js file to use as a test case

Input.map (item = Item + 1);

1, the project needs to add a file: Package.json

{  "name": "Application-name",  "version": "0.0.1"}

2, the current project, the installation of Babel

Install --save-dev babel-cli

3. Using the file Watcher function with Webstorm

Preferences > Tools > File watchers, click on the + sign on the right, select Babel, and click OK directly.

after the operation is done, the JS code is modified, and it is found that a test-compiled.js file is generated synchronously, and the code and the Test.js code are identical when opened.

You also need to configure the transcoding rules to continue looking down. ↓↓↓

4. Adding configuration Files.babelrc

The Babel configuration file is .babelrc stored in the root directory of the project. The first step in using Babel is to configure this file.

This file is used to set up transcoding rules and plugins, the basic format is as follows.

{  "presets": [],  "Plugins": []}

5. Set the transcoding rules

The presets field sets the transcoding rules, which are officially provided by the following rule set, which you can install as needed.

# ES2015 transcoding Rules
--save-dev babel-preset---save-dev babel-preset---save-dev babel-preset-stage-0-- Save-dev babel-preset-stage-1--save-dev babel-preset-stage-2--save-dev babel-preset-stage-3

We need to install the ES2015 command as follows:

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

6. Update the configuration file.babelrc

Save the appropriate rules to the configuration file.

{  "presets": [   "es2015"  ],  "Plugins": []}

7, complete, see the effect

Once the above steps are complete, you can automatically convert the ES6 code to ES5 after you have modified the code.

Use the command to compile the code manually

1. Change the package.json file

{  "name": "Application-name",  "version": "0.0.1",  "Devdependencies": {    "BABEL-CLI": "^6.26.0"     },  "Scripts": {    "Build": "Babel src-d Lib"   }}

2, use the command, generate ES5 code

NPM Run Build

3. Effect

The code under the SRC directory will be compiled into the Lib directory.

Vi. Reference Links

Http://www.ruanyifeng.com/blog/2016/01/babel.html

https://www.zhihu.com/question/43414079

Webstorm ES6 Syntax support settings &babel use and automatic compilation