gulp-babal 6.x.x 에서 jsx 파일 빌드하기 on redgoose note

gulp-babal 6.x.x 에서 jsx 파일 빌드하기

Nest: Development Category: node.js 2015-11-11

babel6로 업데이트 되면서 빌드 옵션값들이 추가되었다.
플러그인이나 프리셋 옵션들이 생겼는데 기존 버전같이 빌드하면 오류가 나는것을 보게되어 열심히 찾아보니 babel6로 넘어가면서 jsx빌드도 플러그인으로 빼버렸다. -_-;

Install module

gulp와 gulp-babel 모듈이 설치되어있다는것을 가정하고, 다음 명령어와 같이 babel-plugin-transform-react-jsx 모듈을 설치한다.

npm install --save-dev babel-plugin-transform-react-jsx

gulpfile.js source

gulpfile.js에서 대략 이런 형태로 plugin 옵션을 더해준다.

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.jsx")
    .pipe(babel({
        plugins : ["transform-react-jsx"]
    }))
    .pipe(gulp.dest("dist"));
});

.babelrc 파일로 babel 옵션관리

.babelrc 이름의 파일로 별도로 만들어서 옵션을 관리할 수 있도록 해놨다. -_-;

{
    "plugins": ["transform-react-jsx"]
}
{
  "plugins": [
    ["transform-react-jsx", { "pragma": "dom" }]
  ]
}

ps.
망할... 구글링해도 잘 안나오고 babel 사이트에서 숨은그림찾기 하다시피 페이지를 찾아냈다.
babel6로 넘어가면서 옵션들을 다 쪼개버린 인상을 받는데 확장성은 좋아보이긴 하다. ㅋ~


참고 URL: http://babeljs.io/docs/plugins/transform-react-jsx/