Verwendung von gulp für die ES6-Transkodierung

ECMAScript 6.0 (kurz ES6) ist der Standard der nächsten Generation der JavaScript-Sprache und wurde im Juni 2015 offiziell veröffentlicht. Als neue Generation von Programmierern mit Idealen und Zielen können wir so etwas Gutes natürlich nicht loslassen.

Aber das ES6-Kompatibilitätsproblem bereitet jedem Kopfzerbrechen. Glücklicherweise gibt es so etwas wie den ES6-Transcoder, der uns als treuer Gulp-Fan einfach und unkompliziert implementieren kann schnell? Was ist mit der Transkodierung von ES6 nach ES5:

1. Zuerst müssen wir das gulp-babel-Plug-in und den babel-preset-es2015-Regelsatz herunterladen:

Befehlszeilencode

npm install --save-dev gulp-babel babel-preset-es2015

2. Als nächstes beginnen wir mit dem Schreiben der gulpfile.js-Datei:

Js-Code

var gulp = require('gulp');

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

var config={

es6file:'src /js/test.js ',

es5file:'dist/js/'

};

gulp.task('es6', function () {

return gulp .src(config.es6file)

.pipe(babel({

) Presets: ['es2015']

}))

                                          pipe(uglify())

});

gulp.task( 'Standard ', function ( ) {

gulp.watch(config.es6file, ['es6']);

}); So aktivieren Sie die Aufgabenüberwachung:

Befehlszeilencode

gulp

4. Schreiben Sie als Nächstes den folgenden ES6-Code in die Datei src/js/test.js und speichern Sie ihn unter Überprüfen Sie, ob der Test erfolgreich ist:

Es6 code

let arr=[1,6,8,3]

let a="likeke"

arr.map(item=> item+1);

Wenn wir die Datei dist/js/test.js öffnen, sehen wir den erfolgreich konvertierten Code:

　

Js-Code

"use strict";

/** 

 * Erstellt von likeke am 16.9.28. 

 */

var arr = [1, 6, 8, 3];

var a = "likeke";

arr.map(function (item) {

return item + 1;

});