Use Babel to compile ES6 in idea (Phpstorm)

Installing Babel

The official documentation suggests that we install locally based on a single project because different projects can rely on different versions of Babel to make your project more portable and easier to install.
Use the command line tool (CMD, etc.) in the root directory of the project to execute the following code

npm install --save-dev babel-cli

Install compilation rules

The official set of preset sets of rules are available for some of the experimental features of ES2015, React, and ES7, respectively. We can install it as needed (if you only need to learn ES6 grammar, just choose ES2015).

# ES2015转码规则npm install --save-dev babel-preset-es2015 # react转码规则npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个npm install --save-dev babel-preset-stage-0npm install --save-dev babel-preset-stage-1npm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-stage-3

. babelrc File Configuration

(1) Create a. babelrc file under the project root directory. Note: Windows systems cannot create such files directly, and we can create them using the command line, or the Code Editor.
(2) Enter the following in the file to enable the preset (assuming we have used the ES2015 as a transcoding rule).

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

Well, now that the Babel installation is over, the next step is to set up the Babel configuration in Phpstorm.

Set Babel in Idea (Phpstorm)

1. First select the JavaScript option in Settings->languages & Frameworks, then set the version of the right JavaScript to ECMASCRIPT6

2. Then search for file Watcher in the search box, click the Plus button in the plot, select Babel to pop up a new watcher window

3. In program this entry into the Babel.cmd file, my path is (E:\dev\phpStudy\PHPTutorial\WWW\jinzhai\node_modules.bin\babel.cmd)

4. Replace the code inside the arguments item with the $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015 Click OK and the app will

Use

Create a new Test.js file in the project to write the ES6 syntax code, the Dist folder and the corresponding compiled ES5 file are automatically generated under the root directory

I wish you a happy use.

Use Babel to compile ES6 in idea (Phpstorm)