ES6 트랜스코딩에 gulp 사용

ECMAScript 6.0(줄여서 ES6)은 JavaScript 언어의 차세대 표준으로 2015년 6월 공식 출시되었습니다. 이상과 추구를 지닌 신세대 프로그래머로서 우리는 이런 좋은 점을 버릴 수는 없습니다.

그런데 ES6 호환성 문제는 모두에게 골칫거리입니다. 다행히도 이러한 고민을 덜어줄 수 있는 ES6 트랜스코더가 있습니다. 그래서 Gulp의 열렬한 팬으로서 어떻게 쉽게 구현할 수 있을까요? ES6에서 ES5로 트랜스코딩하려면 어떻게 해야 할까요?

1. 먼저 gulp-babel 플러그인과 babel-preset-es2015 규칙 세트를 다운로드해야 합니다.

명령줄 코드

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

2. 다음으로 gulpfile.js 파일 작성을 시작합니다.

Js 코드

var gulp = require('gulp');

var babel = require('gulp-babel')

var config={

es6file:'src /js/test.js ',

es5file:'dist/js/'

} gulp.task('es6', function () {

return gulp .src(config.es6file)

.pipe(babel({

) 프리셋: ['es2015']

}))

> gulp.task('기본값 ', function ( ) {

gulp.watch(config.es6file, ['es6'])

})

3. 마지막으로 gulp 명령을 입력합니다. 작업 모니터링을 활성화하려면:

명령줄 코드

gulp

4. 다음으로 src/js/test.js 파일에 다음 ES6 코드를 작성하고 다음 위치에 저장합니다. 테스트가 성공했는지 확인하세요.

Es6 코드

let arr=[1,6,8,3]

let a="likeke";

arr.map(item=> item+1);

dist/js/test.js 파일을 열면 성공적으로 변환된 코드를 볼 수 있습니다:

　

Js 코드

"엄격한 사용";

/** 

 * likeke가 16-9-28에 작성함. 

 */

var arr = [1, 6, 8, 3];

var a = "likeke";

arr.map(function (item) {

return item + 1;

})