Detailed explanation WebStorm uses Babel to automatically transfer ES6 into ES5

Preface: ECMAScript 6 is the next-generation standard for the JavaScript language, which has been officially released in June 2015. Mozilla will launch JavaScript 2.0 based on this standard. The goal of ES6 is to make the JavaScript language can be used to write large complex applications to become an enterprise development language. But modern browsers have little support for ES6 new features, so I want to use the new features of ES6 directly in the browser to achieve other tools.

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.

详解设置Webstorm 利用babel将ES6自动转码成ES5 3. Open the terminal (TERMINAL) of the WebStorm, the shortcuts are Alt + F12, install the Babel-CLI. It can also be installed globally.

详解设置Webstorm 利用babel将ES6自动转码成ES5 Install Babel-CLI: NPM Install – Save-Dev Babel-Cli

4 After installing the Babel-CLI, you can see a new Node_Modules file and a package-loch.json file, and it is found that there is more than

“DEVDependencies”: {“Babel-CLI”: “^ 6.26.0”}
Such a row of code, this code shows that the Babel-CLI has been installed successfully and forms a dependence.

5. Then set the JavaScript option in Settings-> Languages ​​& Frameworks while selecting the version of the Version version to ECMAScript6.

详解设置Webstorm 利用babel将ES6自动转码成ES5 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 详解设置Webstorm 利用babel将ES6自动转码成ES5

After installation, it will be more in the package.json file

“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:   
{“presets”: [“ES2015”]}

8. Set File Watcher. File – Settings – Tools – File Watcher.

详解设置Webstorm 利用babel将ES6自动转码成ES5
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.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment