Today I will share it, how to configure WebStorm to automatically transfer ES6 into ES5 using Babel. Babel is a widely used transcoder, Babel can perfectly convert ES6 code to ES5 code, so we don’t have to wait until the browser support can use ES6 features in the project.
1. Newly built an empty project in WebStorm, named ES6Demo.
2. Then set up a package.json under the root directory, just write two attributes, namely Name And Version.
3. Open the terminal (TERMINAL) of the WebStorm, the shortcuts are Alt + F12, install the Babel-CLI. It can also be installed globally.
Install Babel-CLI: NPM Install – Save-Dev Babel-Cli
Such a row of code, this code shows that the Babel-CLI has been installed successfully and forms a dependence.
6. In again at the terminal of WebStorm, install Babel’s preset to correctly identify ES6 code, the command is as follows:
NPM Install – Save-Dev Babel-Preset-ES2015
“Babel-Preset-ES2015”: “^ 6.24.1” This line of code shows that Babel-Preset-ES2015 has been successfully installed.
7. Newly built a new name .babelrc file below the root directory, the content is as follows:
8. Set File Watcher. File – Settings – Tools – File Watcher.
9. Create a syntax called Test.js, write ES6 inside, no longer reporting . Test-compiled.js is a file compiled into an ES5, default is strict mode.