이 글에서는 Gulp와 Babel 6을 사용하여 ES6 코드를 ES5 코드로 변환하는 방법을 소개합니다.
다른 도구를 사용하여 Babel로 작업하는 경우 여기에서 볼 수 있습니다. Gulp가 무엇인지 모르시나요? 먼저 Gulp 시작하기 가이드를 확인해 보세요.
전역 Gulp 설치
npm install -g gulp
프로젝트에 사용된 Gulp 설치
npm install --save-dev gulp
Babel에 Gulp 설치 플러그인
npm install --save-dev gulp-babel
Babel
npm install --save-dev babel-preset-es2015
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 存放的路径 });
형식 Soucemap을 생성하려면 다음 형식으로 gulp-sourcemaps를 사용하세요.
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")); });
> 프로젝트 루트 경로에 .babelrc
파일을 생성합니다. 내용은
{ "presets": ["es2015"] }
를 변환하고 명령줄에서
gulp
를 실행하세요.
위 내용은 ES6 코드를 ES5로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!