Can babel convert es6 to es5

Yes, conversion method: 1. Execute the "npm install -g babel-cli --save-dev" command in the project root directory to install Babel into the project, and store the Babel configuration file ".babelrc" In the root directory of the project, set the transcoding rules; 2. Install gulp and gulp-babel in the project, and configure the "gulpfile.js" file.

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

While we are still obsessed with ES5, we don’t know that ES6 has been released for several years. Times are advancing, and WEB front-end technology is also changing with each passing day. It’s time to make some changes!

ECMAScript 6 (ES6) is developing very fast, but 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 the browser, you have to use other tools to fulfill.
Babel is a widely used transcoder. Babel can perfectly convert ES6 code to ES5 code, so we can use ES6 features in our projects without waiting for browser support.

The difference between babel 6 and previous versions:

The previous version only needs to install a babel, so the previous version contains a lot of things. It also resulted in downloading a bunch of unnecessary stuff. But in babel 6, babel is split into two packages: babel-cli and babel-core. If you want to use babel in the CLI (terminal or REPL) download babel-cli, if you want to use it in node download babel-core. Babel 6 has been made as modular as possible. If you still use the method before Babel 6 to convert ES6, it will be output as is and will not be converted because you need to install a plug-in. If you want to use arrow functions, you need to install the arrow function plug-in npm install babel-plugin-transform-es2015-arrow-functions.

In this article, we will not discuss the syntax features of ES6, but focus on how to transcode ES6 code into ES5 code.

Babel transcoding:

If you have not been exposed to ES6, when you see the following code, you must be It’s a bit confusing (what the hell is this? Ten thousand mythical beasts are rushing past in my heart), but you read it right, this is ES6. Whether you see it or not, it's here.

var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

In fact, after the above code is converted by Babel, it will become:

"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

Okay, let’s get back to the subject, let’s try some methods to achieve the above transcoding effect.

1. Directly install Babel method:

1.1) First install Babel globally.

$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

If you install babel directly into your project, it will automatically add babel-cli to the devDependencies in the package.json file. As shown below:

	//......
	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2"
	  }
	}

1.2) Babel’s configuration file is .babelrc, which is stored in the root directory of the project. The first step in using Babel is to configure this file.

The complete file name of this file is ".babelrc". Note that there is a "." at the beginning. Since my computer is a Windows system, when I create this file, I always get the error "You must type the file name." Later, I googled it and found that when creating this file, I changed the file name to ".babelrc.". Note that there is a dot before and after, so that it can be saved successfully.

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

1.3) presets Set the transcoding rules in the field. The following rule sets are officially provided, and you can install them as needed.

Click here to go to the Babel Chinese official website presets configuration page: Babel Plugins

	# 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-0
	$ npm install --save-dev babel-preset-stage-1
	$ npm install --save-dev babel-preset-stage-2
	$ npm install --save-dev babel-preset-stage-3

1.4) According to the official website’s prompts, after we install these plug-in tools using npm, We need to add these rules to .babelrc. As shown below:

	{
	    "presets": [
	      "es2015",
	      "react",
	      "stage-2"
	    ],
	    "plugins": []
	  }

1.5) Transcoding and transcoding rules:

	# 转码结果输出到标准输出
	$ babel test.js

	# 转码结果写入一个文件
	# --out-file 或 -o 参数指定输出文件
	$ babel a.js --out-file b.js
	# 或者
	$ babel a.js -o b.js

	# 整个目录转码
	# --out-dir 或 -d 参数指定输出目录
	$ babel src --out-dir lib
	# 或者
	$ babel src -d lib

	# -s 参数生成source map文件
	$ babel src -d lib -s

2. Tool configuration method:

In fact, we ES6 transcoding configuration can be achieved through many front-end automation tools, such as common grunt, gulp, Webpack, and Node. Below I will briefly talk about the gulp configuration method that I am more familiar with.

Click here to go to the Babel Chinese official website Tool configuration page: Babel Tool

2.1) First, we need to install gulp in the project:

	$ npm install gulp --save-dev

2.2) Then, we need Install gulp-babel in the project:

	$ npm install --save-dev gulp-babel

After executing the above two commands, we will find that the content of the package.json file in the root directory has been automatically modified to:

	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2",
	    "gulp": "^3.9.1",
	    "gulp-babel": "^6.1.2"
	  }
	}

2.3) Write the gulpfile.js file. The file content is as follows:

	var gulp = require("gulp");
	var babel = require("gulp-babel");

	gulp.task("default", function () {
	  return gulp.src("src/a.js")
	    .pipe(babel())
	    .pipe(gulp.dest("lib"));
	});

When we run the following command in the current project directory, we will find a.js originally in the src folder (written according to ES6 standards ) file has been transcoded into ES5 standard a.js and placed in the lib folder.

	$ gulp default

	#或者用下面的命令也行
	$ gulp

【Related recommendations: javascript video tutorial, programming video】

The above is the detailed content of Can babel convert es6 to es5. For more information, please follow other related articles on the PHP Chinese website!