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.

1. InstallierenAbhängigkeiten

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

2. Gulp-Konfiguration

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"));
});

3. Babel-Konfiguration

Datei .babelrc im Projektstammpfad erstellen. Der Inhalt ist

{
  "presets": ["es2015"]
}

4. Konvertieren Sie

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!