Home >Web Front-end >JS Tutorial >Convert ES6 code to ES5
This article introduces using Gulp and Babel 6 to convert ES6 code into ES5 code.
If you use other tools to do it with Babel, you can see here. Don’t know what Gulp is? Please check out the Gulp Getting Started Guide first.
Install global Gulp
npm install -g gulp
Install the Gulp used in the project
npm install --save-dev gulp
Install Gulp on Babel Plug-in
npm install --save-dev gulp-babel
Install the plug-in for converting ES6 to ES5 on Babel
npm install --save-dev babel-preset-es2015
gulpfile.js content, in the form of
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 存放的路径 });
If you want to generate Sourcemap, use gulp-sourcemaps, in the form of:
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")); });
Create file .babelrc
in the project root path. The content is
{ "presets": ["es2015"] }
and execute
gulp
in the command line. The complete code can be found here.
The above is the detailed content of Convert ES6 code to ES5. For more information, please follow other related articles on the PHP Chinese website!