Heim  >  Artikel  >  Web-Frontend  >  Konvertieren Sie ES6-Code in ES5

Konvertieren Sie ES6-Code in ES5

PHPz
PHPzOriginal
2017-04-04 10:32:163071Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Variablensuche in JavaScriptNächster Artikel:Variablensuche in JavaScript