Heim > Artikel > Web-Frontend > Konvertieren Sie ES6-Code in ES5
In diesem Artikel wird die Verwendung von Gulp und Babel 6 zum Konvertieren von ES6-Code in ES5-Code vorgestellt.
Wenn Sie andere Tools für die Arbeit mit Babel verwenden, können Sie hier sehen. Sie wissen nicht, was Gulp ist? Bitte schauen Sie sich zuerst den Gulp-Einstiegsleitfaden an.
Installieren Sie globales Gulp
npm install -g gulp
Installieren Sie das im Projekt verwendete Gulp
npm install --save-dev gulp
Installieren Sie das Babel-Plug-in auf Gulp
npm install --save-dev gulp-babel
Installieren Sie das Babel-Plug-in, um ES6 in ES5 zu konvertieren
npm install --save-dev babel-preset-es2015
gulp Datei.js-Inhalt, in der Form von
var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("src/**/*.js")// ES6 源码存放的路径 .pipe(babel()) .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径 });
Wenn Sie Soucemap generieren möchten, verwenden Sie gulp-sourcemaps in der Form von :
var gulp = require("gulp"); var sourcemaps = require("gulp-sourcemaps"); var babel = require("gulp-babel"); var concat = require("gulp-concat"); gulp.task("default", function () { return gulp.src("src/**/*.js") .pipe(sourcemaps.init()) .pipe(babel()) .pipe(concat("all.js")) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("dist")); });
Datei .babelrc
im Projektstammpfad erstellen. Der Inhalt ist
{ "presets": ["es2015"] }
und führen Sie
gulp
in der Befehlszeile aus.
Das obige ist der detaillierte Inhalt vonKonvertieren Sie ES6-Code in ES5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!