Maison > interface Web > js tutoriel > le corps du texte

Convertir le code ES6 en ES5

PHPz
Libérer: 2017-04-04 10:32:16
original
3078 Les gens l'ont consulté

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
Copier après la connexion

Installer le Gulp utilisé dans le projet

npm install --save-dev gulp
Copier après la connexion

Installez le plug-in Babel sur Gulp

npm install --save-dev gulp-babel
Copier après la connexion

Installez le plug-in Babel pour convertir ES6 en ES5

npm install --save-dev babel-preset-es2015
Copier après la connexion

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 存放的路径
});
Copier après la connexion

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"));
});
Copier après la connexion

3. Configuration de Babel

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

{
  "presets": ["es2015"]
}
Copier après la connexion

4. Convertissez

et exécutez

gulp
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal