gulp-babal 6.x.x 에서 jsx 파일 빌드하기
- Nest
- Development
- Category
- node.js
- Hit
- 669
- Star
- 0
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로 넘어가면서 옵션들을 다 쪼개버린 인상을 받는데 확장성은 좋아보이긴 하다. ㅋ~