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!
