Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to turn es6 into es5 related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to turn es6 into es5 will have a harvest, let's take a look at it.

Reason: for browser compatibility, and for running applications smoothly in a node.js environment. As a new specification of JS, ES6 has added a lot of new syntax and API, but modern browsers do not have high support for the new features of ES6, so it is necessary to convert ES6 code into ES5 code; just install and configure Babel tools in the project.

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

Why convert es6 to es5?

The simple answer is: for browser compatibility and for applications to run smoothly in a node.js environment.

As a new specification of JS, ES6 adds a lot of new syntax and API, but the browsers on the market are not all compatible, so it is necessary to convert the ES6 syntax code into ES5 code.

Modern browsers do not have high support for the new features of ES6, so if you want to use the new features of ES6 directly in browsers, you have to use other tools.

In the node.js environment, node's support for ES6 has always been criticized, and the module mode was not available until version 13 (adding a sentence to package.json: "type": "module"), but some libraries still do not support ES6 syntax. Therefore, if your node.js program does not understand the ES6 syntax, please use Babel transcoding may solve the problem.

How to convert es6 to es5?

Use babel to convert es6 to es5.

Let's write down the process of using Babel on the command line to let you know the whole process of translation.

1. Install the command line tool for Babel in the project

Npm install-D babel-cli

two。 Prepare the ES6 code

Usually we put the source code in the src directory, and if you don't have ready-made ES6 code, create one in the src directory:

/ / src/example.jsclass Hello {static world () {console.log ('Hello, Worldwide');}} Hello.world ()

3. Configure Babel

Babel translates code through plug-ins and presets (preset) (so it can translate more than just ES6). In order to translate ES6 to ES5, we just need to configure the env default value and install this plug-in:

Npm install-D babel-preset-env

We also need a configuration file to create a file under the project root: .babelrc, as follows:

/ / .babelrc {"presets": ["env"]}

4. Create a npm command

This step is not necessary, because it has been configured earlier, and you can execute the command directly:

Babel src-d build

This translates the Javascript code in the src directory into ES5 and stores it in the build directory.

Traditionally, we put the door-to-door command in the npm command. In the package.json of the project, enter the following:

"scripts": {"build": "babel src-d build",}

So you can use the following command to translate the ES6 code:

This is the end of npm run build's article on "how to convert es6 to es5". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to convert es6 into es5". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.