babel 하나만으로 es6 사용하기

webpack 없이 gulp 없이 프로젝트 전체에 적용하기

fetch()가 쓰고 싶어졌다! 그래서 프로젝트에 한 번 babel을 적용시켜보기로 했다. 그런데 공홈에 가서 이런 저런 문서를 읽어도 잘 감이 안 왔다.

babel은 알겠는데 babel-cli는 뭐임? babel-core는 또 무엇? 그리고 이거 왜 같은 폴더에 안 만들어져? package.json은 무엇이고 .babelrc는 무엇인가요.. 총체적인 난국이었다. -_-;; (그리고 gulp-babel은 일단 여기서는 생략한다 -_-;;;;;)

..암튼 어찌저찌 해서 세팅을 마친 것 같고; 결과를 여기에 남겨둔다.

1. 설치

제일 먼저 프로젝트를 설정하자. npm init -y 를 하면 package.json이 생기는데, 우리는 어짜피 npm run build만 할 것이므로 "main": "index.js"는 지워버리자.

그리고 babel-cli랑 babel/preset-es2015를 설치해주자.

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

프리셋 설치가 포인트 하나였는데.. npm으로 설치하면 왜인지 babel 6.26이 설치되고, babel-preset-env는 babel 7 이상에서만 된다고 해서 그냥 구버젼인 es2015를 설치했다. -.-;;

2. 설정 (1/2)

.babelrc파일을 루트에 만들어주고 preset 설정을 해준다.

{ "presets": ["es2015"] }

3. 트랜스폼transform

오케 준비 다 됐다! 냅다 한 번 해보자.

npx babel test.js -d lib

이러면 test.js 파일이 트랜스폼 되서 lib 디렉토리에 들어간다.

근데 내가 원하는건 이게 아니다.. 1) 루트 이하의 모든 es6 파일들이 2) 각자의 경로에 트랜스폼되길 원하는거다. 이제 이렇게 해보자.

npx babel src --extensions=".es6" --out-dir src

이렇게 하면 src 경로 아래의 모든 파일 중, 확장자가 .es6인 파일들만 찾아서 각자의 src디렉토리에 트랜스폼 시켜주게 된다. 이 과정에서 확장자는 자동으로 .js로 바뀐다. (루트부터 시작하면 뭔가 이상하게 잘 안 되서 패스했다.)

이렇게 여러 파일을 적절하게 이름 변경해서 같은 경로!에 트랜스폼 하는거.. 나는 이게 어려웠다!!! T_T 이거 어케 하는지 한참 찾다가 요 stackoverflow 글을 통해서 해결했다 T_T 보통은 gulp 등으로 하는 모양이다.

4. 설정 (2/2)

이제 -w 옵션을 주고 package.json의 script에다가 추가해놓자.

"build": "babel src --extensions='.es6' --out-dir src -w"

그리고 npm run build해놓으면 알아서 watch해서 새 파일이나 파일 바뀌면 샥샥 트랜스폼 해준다.

야호 나도 이제 es6 개발자! (-_-)v

덧: 대세에 따라 npm에서 yarn으로 갈아탔다. yarn이 더 빠르고 터미널도 더 예쁨!