현재 es6가 많이 이용되고 있긴 하나 브라우저가 es6의 모든 기능을 지원하는 것은 아니다. 그래서 babel이라는 트랜트컴파일러를 이용해 es5로 변환해서 배포 해야한다. 이 글에서는 gulp를 활용한 babel 사용법을 정리해본다.

기본 프로젝트 구조

1
2
3
4
5
6
├─ .babelrc
├─ gulpfile.js
├─ package.json
└─ src
   └─ js
      └─ lib.js

설치목록

1
2
3
4
5
npm install -g gulp
npm install --save-dev gulp gulp-babel
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/core
npm install --save-dev gulp-sourcemaps

gulp

gulp 명령어로 gulpfile.js를 실행할 수 있다

gulp-babel

gulp를 이용해 babel을 사용할 수 있게 해주는 패키지다

@babel/preset-env

최신 javascript를 변환해 줄 수 있는 패키지다.

@babel/core

gulp-babel의 peer dependency라고 하는데 뭔 뜻인지 모르겠다. 일단 필요하니까 설치한다

gulp-sourcemaps

변환된 코드와 변환되기 전 코드를 매핑해주는 패키지

그리고 프로젝트 폴더에 .babelrc 파일을 생성하고 다음과 같이 작성한다.

1
2
3
{
  "presets": ["@babel/preset-env"]
}

es6코드 작성

이제 es6코드를 src/js/lib.js 에 작성한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let sum = (a, b) => a + b;

console.log(sum(3, 4));

const sentences = [
  { subject: "JavaScript", verb: "is", object: "great" },
  { subject: "papago", verb: "are", object: "large" }
];

const say = ({ subject, verb, object }) => {
  console.log(`${subject}${verb}${object}`);
};

// sentence 배열 내에 있는 각 객체별로 subject, verb, object를 연결해 출력
for (let s of sentences) {
  say(s);
}

노드를 이용해 코드를 먼저 실행해본다

1
node src/js/lib.js

출력내용

1
2
3
7
JavaScriptisgreat
papagoarelarge

gulpfile 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp = require('gulp');
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('babel', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write('./', {sourceRoot: '../src'}))
    .pipe(gulp.dest('dist'));
});

gulp.task('watch',function(){
  gulp.watch('src/**/*.js',gulp.series('babel'));
});

자세한 설명은 생략한다
이제 gulp 명령어로 babel을 실행해본다

1
gulp babel

컴파일되어 생성된 dist 폴더

1
2
3
4
5
6
7
8
9
10
├─ .babelrc
├─ gulpfile.js
├─ package.json
├─ dist
   └─ js
      ├─ lib.js
      └─ lib.js.map
└─ src
   └─ js
      └─ lib.js

gulp watch 관련 이슈

이전에 하던대로 watch 코드를 작성 후 돌려봤는데 오류가 떴다.

1
2
Error: watching app/css/*.css: watch task has to be a function ...
어쩌구

구글링 해보니 gulp 버전이 업되면서 사용법이 달라졌던 것이다.

gulp 3.x 버전

1
2
3
4
5
gulp.task('watch', function() {
  gulp.watch('app/css/*.css', ['styles']);
  gulp.watch('app/js/*.js', ['scripts']);
  gulp.watch('app/img/*', ['images']);
});

gulp 4.x 버전

1
2
3
4
5
gulp.task('watch', function() {
  gulp.watch('app/css/*.css', gulp.series('styles'));
  gulp.watch('app/js/*.js', gulp.series('scripts'));
  gulp.watch('app/img/*', gulp.series('images'));
});