Simply translate the new JavaScript syntax of ES2015/2017/2046 into ES5 and make it accessible and executable in low end environments such as browsers and Nodes. Strictly speaking, Babel can also be converted to a lower specification. But as it stands now, the ES5 specification is sufficient to cover most browsers, so it is generally safe and popular to move to ES5.

ES6 to ES5 (the first type)

Initialize the project
npm init --y
Copy the code
Install dependencies
npm install babel-cli -D
Copy the code
npm install babel-preset-es2015 -D
Copy the code
Create and edit ES6 files in your project

This is just an example of using ES6 syntax to see if it can be translated into ES5 syntax. Let’s say we call it index.js and put it in the SRC folder of the project root.

// src/index.js
let a = 1;

let fun = () = >{
    console.log(a);
}
Copy the code
The editor package. Json

We need to add the command to the scripts field ourselves:

  • build-t: Compiles a file separately
  • build-d: Compiles all files in one folder to another folder (folder automatically generated, no need to create your own)
  • build-o: Compiles specified files in one folder to another folder (folder needs to be created by yourself, you can specify the file name)
{
  "name": "babel01"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build-t":"babel index.js --presets es2015"."build-d": "babel src -d lib --presets es2015"."build-o":"babel src/index.js -o dist/index.js --presets es2015"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "babel-cli": "^ 6.26.0"."babel-preset-es2015": "^ 6.24.1"}}Copy the code
Start the compilation
NPM run < here is the command for the scripts field >Copy the code

Here is the compiled ES5 file.

"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};
Copy the code

ES6 to ES5 (second type)

It’s actually similar to the first one.

Initialize the project
npm init --y
Copy the code
Install dependencies
npm install babel-cli -D
Copy the code
npm install babel-preset-es2015 -D
Copy the code
Create and edit ES6 files in your project

This is just an example of using ES6 syntax to see if it can be translated into ES5 syntax. Let’s say we call it index.js and put it in the SRC folder of the project root.

// src/index.js
let a = 1;

let fun = () = >{
    console.log(a);
}
Copy the code
Create and edit the. Babelrc file in the project

Create the. Babelrc file in the root directory.

{
    "presets": ["es2015"]."plugins": []}Copy the code
The editor package. Json

We need to add our own commands to the scripts field. The command content is the same as in the first method, except that presets es2015 is omitted.

{
  "name": "babel01"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
	 "build":"babel src/index.js -o dist/index.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "babel-cli": "^ 6.26.0"."babel-preset-es2015": "^ 6.24.1"}}Copy the code
Start the compilation
npm run build
Copy the code

Here is the compiled ES5 file.

"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};
Copy the code

Turn ES5 ES6 +

Here ES6+ refers to ES6, ES7, ES8, etc.

Initialize the project
npm init --y
Copy the code
Install dependencies
npm install babel-cli -D
Copy the code
npm install babel-preset-env -D
Copy the code
Create and edit ES6 files in your project

This is just an example of using ES6 syntax to see if it can be translated into ES5 syntax. Let’s say we call it index.js and put it in the SRC folder of the project root.

// src/index.js
let a = 1;

let fun = () = >{
    console.log(a);
}
Copy the code
Create and edit the. Babelrc file in the project

Create the. Babelrc file in the root directory.

{
    "presets": ["env"]}Copy the code
The editor package. Json

The command content is not only this one, according to your needs to write, other commands can see the above ES6 to ES5 (the first type).

{
  "name": "babel01"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
	 "build": "babel src -d dist"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "babel-cli": "^ 6.26.0"."babel-preset-es2015": "^ 6.24.1"}}Copy the code
Start the compilation
npm run build
Copy the code

Here is the compiled ES5 file.

"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};
Copy the code

conclusion

This article mainly introduces two methods of ES6 to ES5 and how ES6+ to ES5. But now most of the use of ES6+ how to turn ES5 more, mainly let us experience the feeling of upgrading. If you feel good, trouble to pay attention to my public number oh, will not regularly issue front-end e-books and learning advanced video.

Welcome to pay attention to my public account “front-end history robbery Road”

​

Reply keyword e-books, you can get nearly 12 front-end popular e-books.

​

Reply keywords little Red Book 4th edition, you can get the latest “JavaScript advanced Programming” (4th edition) ebook.

​

You can also add me to wechat. I have wooed many IT bigwigs and created a technical exchange and article sharing group. Welcome to join.

​

  • Author: Vam’s Golden Bean Road

  • Main area: front-end development

  • My wechat account is Maomin9761

  • Wechat public number: the front end of the road through robbery

​