The Babel of the ES6 converter

ES6 part of the function is not supported, so want to learn ES6, you have to first have a converter, that is, ES6 code to convert to ES5.

I use the form of Gulp + bable to convert the ES6 to ES5.

Premise:

(1), Gulp and Bable are based on the node environment, if you do not know node, it is recommended to first look at "Preliminary Nodejs".

(2), speaking of Gulp, if you are not very clear, it is recommended to first understand gulp ("elaborate gulp").

OK, from scratch. Next, let's build this ' conversion artifact ' step by step.

Get started

Because it is the form of Gulp + bable, the Gulp and bable modules must be installed first. Easily get it done with NPM.

However, in order to easily view the information about Gulp installation in the future, we can build a Package.json file in the project root path, the contents are as follows:

--Name--: the project title (Take it yourself, as above "Gulppro");

--devdependencies--: Used to record the project dependency module.

OK, let's start with the installation.

1. Gulp in the installation project

NPM Install--save-dev Gulp

2, install Gulp on the bable plug-in

NPM Install--save-dev Gulp-babel

3. Install ES6 conversion ES5 plug-in

NPM Install--save-dev babel-preset-es2015

OK, after the module is installed, we will open the Package.json file we created just now, as follows:

Can be clearly seen in the devdpendencies, we have just installed the module dependency.

Next, the steps to configure gulpfile.js are similar to the "sledgehammer compression JavaScript" approach in "Gulp". Here we are in accordance with gourd painting scoop, the following configuration content:

// Introducing the Gulp module var gulp = require (' Gulp '); // introduction of the Gulp-babel module for converting ES6 to ES5 var babel = require (' Gulp-babel '); // Default Task function () {    // This is to convert JS under the script file to ES5 and add it to the Dist folder    gulp.src (' Script/*.js ' )        . Pipe (Babel ())        . Pipe (Gulp.dest (' dist ');});

Finally, we create a new. babelrc file under the root path, with the following content:

Because I am the root path of the ES6 folder as the D drive, so after the above steps, the ES6 folder is now:

OK, then create a script folder under the root path, a new demo.js is used to verify the success of the configuration.

The contents of the Demo.js are:

// assign values directly in the parameters, belonging to the ES6 specification, such as y= ' World ' function log (x, y = ' world ') {    console.log (x, y);}; Log (

In the CMD environment (D:\ES6) Input Gulp + ENTER, run.

As follows:

This will be a success. You will find that there is a dist folder in the root path, and there is one more demo.js in it.

Yes, this JS file is the result of converting to ES5.

As follows:

With this artifact, we can learn ES6.

but, in order to let us learn ES6, more efficient, we will improve the gulpfile.js in the configuration content.

Because, when we learn ES6, it is inevitable that grammar and other errors, when we use Gulp to convert, once encountered errors, will be error and stop running gulp. And, gulp self-reported mistake, does not matter, in the actual operation, does not know what this error is, very affects the efficiency.

So, we can use Stream-combiner2 to solve this problem. When Gulp encounters an error, it uses Stream-combiner2 to capture the error message and to tell us exactly where the error is. Doesn't that make it more efficient?

As follows:

//Introducing the Gulp modulevarGulp = require (' Gulp '));//introduction of the Gulp-babel module for converting ES6 to ES5varBabel = require (' Gulp-babel '));//introducing Stream-combiner2 to capture error messagesvarCombiner = require (' Stream-combiner2 '));//Catching exception functionsvarHandleError =function(Err) {Console.log (' \ n '); Console.log (' error! '); Console.log (' FileName: ' +err.filename); Console.log (' LineNumber: ' +err.loc.line); Console.log (' Message: ' +err.message); Console.log (' Plugin: ' +err.plugin); Console.log (' \ n ');};//Default TaskGulp.task (' Default ',function(){    //here is the script file under the JS conversion to ES5, and added to the Dist folder    varCombined =Combiner.obj ([Gulp.src (' Script/*.js '), Babel (), Gulp.dest (' Dist ')    ]); //catching exceptions with combinedCombined.on (' ERROR ', HandleError);}); 

Entircode

Test: If we change script/demo.js to the following, and named Demo1.js:

Because we introduced the Stream-combiner2 module, so you have to install it

(NPM install--save-dev stream-combiner2)

After the installation is complete, run gulp with the following results:

Nice. The problem has not stopped gulp, and in the end, printed a specific error message, so we detect errors is very convenient.

However, this is in the case of less testing code, if the number of code? This font is not easy for us to find out oh. So in order to be more perfect and improve our learning efficiency, we can use the Gulp-util module to specify the font color. So, when the error message is marked red, isn't it obvious?

Modify the code as follows:

//Introducing the Gulp modulevarGulp = require (' Gulp '));//introduction of the Gulp-babel module for converting ES6 to ES5varBabel = require (' Gulp-babel '));//introducing Stream-combiner2 to capture error messagesvarCombiner = require (' Stream-combiner2 '));//introduction of the Gulp-util module for the implementation of custom color logvarGutil = require (' Gulp-util '));//Catching exceptionsvarHandleError =function(err) {varcolors =gutil.colors; Console.log (' \ n '); Gutil.log (colors.red (' error! ')); Gutil.log (' FileName: ' +colors.red (err.filename)); Gutil.log (' LineNumber: ' +colors.red (err.loc.line)); Gutil.log (' Message: ' +err.message); Gutil.log (' Plugin: ' +Colors.yellow (Err.plugin));};//Default TaskGulp.task (' Default ',function(){    //here is the script file under the JS conversion to ES5, and added to the Dist folder    /*gulp.src (' script/*.js '). Pipe (Babel ()). Pipe (Gulp.dest (' dist ')); */    varCombined =Combiner.obj ([Gulp.src (' Script/*.js '), Babel (), Gulp.dest (' Dist ')    ]); Combined.on (' Error ', HandleError);}); 

Entirecode

The Gulp-util module is introduced, so you have to install it (npm install--save-dev gulp-util)

Once installed, run gulp again.

Results as follows:

Well, the perfect degree is almost 100%.

In order to be more perfect, we can use the Gulp-watch-path module to listen to the file, and once the file is transformed, we need to convert the ES6 manually. Note: The Gulp-watch-path module is introduced, so you have to install it!!

As follows:

//Introducing the Gulp modulevarGulp = require (' Gulp '));//introduction of the Gulp-babel module for converting ES6 to ES5varBabel = require (' Gulp-babel '));//introducing Stream-combiner2 to capture error messagesvarCombiner = require (' Stream-combiner2 '));//introduction of the Gulp-util module for the implementation of custom color logvarGutil = require (' Gulp-util '));//introduction of the Gulp-watch-path module for monitoringvarWatchpath = require (' Gulp-watch-path '));//Catching exceptionsvarHandleError =function(err) {varcolors =gutil.colors; Console.log (' \ n '); Gutil.log (colors.red (' error! ')); Gutil.log (' FileName: ' +colors.red (err.filename)); Gutil.log (' LineNumber: ' +colors.red (err.loc.line)); Gutil.log (' Message: ' +err.message); Gutil.log (' Plugin: ' +Colors.yellow (Err.plugin));};//Default TaskGulp.task (' Default ',function() {Gulp.watch (' Script/*.js ',function(event) {varpaths = Watchpath (event, ' script/', ' dist/'); varCombined =Combiner.obj ([Gulp.src (Paths.srcpath), Babel (), Gulp.dest (Paths.distdir)]); Combined.on (' Error ', HandleError);     });}); 

Entirecode

The Babel of the ES6 converter