Convertir le code ES6 en ES5

Cet article présente l'utilisation de Gulp et Babel 6 pour convertir le code ES6 en code ES5.

Si vous utilisez d'autres outils pour travailler avec Babel, vous pouvez le voir ici. Vous ne savez pas ce qu'est Gulp ? Veuillez d'abord consulter le guide de démarrage de Gulp.

1. InstallerDépendances

Installer Gulp global

npm install -g gulp

Installer le Gulp utilisé dans le projet

npm install --save-dev gulp

Installez le plug-in Babel sur Gulp

npm install --save-dev gulp-babel

Installez le plug-in Babel pour convertir ES6 en ES5

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

Configuration de Gulp

gulp file.js contenu, sous la forme de

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 存放的路径
});

Si vous souhaitez générer Soucemap, utilisez gulp-sourcemaps, sous la forme de :

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. Configuration de Babel

Créer le fichier .babelrc dans le chemin racine du projet. Le contenu est

{
  "presets": ["es2015"]
}

4. Convertissez

et exécutez

gulp

dans la ligne de commande. Le code complet peut être trouvé ici.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!