BABEL

babel

javascript로 개발을 할 때 다들 BABEL이라는 것을 들어 본 적이 있다고 생각한다.

BABEL을 쓰는 이유는 무엇때문일까? 

 

최신버전 Javascript(좀 더 편리)로 개발을 하고 배포를 할 때 예전버전의 javascript(좀 더 불편)로 변환 해주는 역할을 한다!

 

굳이 왜 ?

구 브라우저들은 최신 버전의 Javascript를 이해 못하기 때문에 이를 대응하기 위한 것이다.

이를 실행하기 위해서는 먼저 node.js가 필요하다.

 

1. 프로젝트를 초기화 해주고 npm init -y(모두 yes처리)

 

2. @babel-cli와 @babel/core를 설치해준다.

npm i -D @babel/core @babel/cli

(개발의존성(devDependencies)으로 설치하는 이유는 Babel은 애플리케이션이 실행 시에 필요한 것이 아니라 빌드 시에만 필요하기 때문이다.) 

쉽게 말하면 devdependencies는 사람에게 필요한 것이고. dependencies는 프로젝트에 필요한 것

자동차가 굴러가기 위해선 가솔린(dependencies)이 필요하고 운전을 좀 더 잘하기 위해선 음악(devdependencies)이 필요하다

 

3. package.json 파일에서

 "script" : {

    "build": "babel ./public/src -d ./public/lib -w"

},

bable(바벨 실행)

./public/src(퍼블릭 src에 있는 스크립트를 변환하여) -d

./public/lib(퍼블릭 lib폴더에 생성해주세요) -w

 

-d 옵션을 사용하면 특정 디렉터리 안에 여러 개의 변환된 파일을 저장할 수 있다. 하나는 o

-w는 더 찾아봐야 겠다...

 

하지만 실제로 해보면 아무 변화가 된 것 없이 생성되었을 것이다.

왜냐하면 아무 설정이 안되어있기 때문인데 이를 해결하기 위해서

 

4. .babelrc라는 파일을 생성하고

npm i -D @babel/preset-env 를 설치

{

 "presets" : ["@babel/env"]

}

라고 적어준다.

env preset에는 ES6 이상(ES2015+)의 문법으로 작성된 코드를 ES5 문법의 코드로 변환해주는 모든 규칙을 정의하고 있고 많이 사용되어지고 있다.

 

다시 npm run build를 해주면 완전히 바뀌어 버린 파일을 볼 수 있을 것이다. ex) let, const -> var

 

++ 압축까지 해주기 위해서 

npm install babel-preset-minify --save-dev 설치 후 

{

 "presets" : ["@babel/env","minify"]

}

설정 !

 

-----------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

nodemon으로 실행하기 위해서

npm i -D nodemon

npm i -D @babel/core @babel/node @babel/preset-env

를 설치해주고

 

package.json에서 명령어에 nodemon --exec bable-node index.js 를 적어주면

babel-node가 먼저 index.js를 최신문법->모두가이해할수있는문법으로 바꿔준뒤 node를 통해서 실행 시킨 후 

그 이후로 nodemon을 통해서 바뀔 때마다 갱신 시켜주는 것 같다.

 

 

여기서 의문점이 두가지 있다.

shell에서 바로 babel-node를 실행하면 안되던데

package.json에서 명령어로 babel-node를 실행하면 신기하게도 실행이 된다..

 

또 nodemon 에서 --exec옵션을 안줘도 뭔가 돌아갈 것 같긴한데 안돌아간다.

구글링 해보았지만 속시원한 대답이 안나오네.... 흠...... 

일단 한가지 확실히 알 수 있는 것은

 

npm 명령어로 실행해야 babel-node가 실행이 되고

nodemon에서 node가 아닌 babel-node를 실행시키려면 --exec옵션이 필요하다는 것이다.