Babel wepack

• Babel 
• ES6의 등장
• 공백기 
• webpack의 동작 

 

Babel 

- 최신문법으로 개발을 하면서 코드 생산성을 높이고 그 문법을 ES5로 변환해서 사용하였습니다.

- 공백기가 있었기때문에 과도기 기술이 너무 빠르게 발전해서 런타임환경에서 완벽하게 제공 불가

 

Babel의 목적 

- 트랜스파일 즉 코드의 문법을 변환하는게 목적이다.

 

babel의 환경 설정
 변환 작업을 할때 원하는 형태로 파일을 변환하기 위해서 설정값이 필요하다.
 babelrc 실행할떄 필요한 설정 파일 babel 속성값을 정의하는 파일

 

ES6 등장 

- 자바스크립트는 표준이 2015년 6월 많은 내용이 업데이트 되었다. 
- let const 화살표 함수 클래스 등등 개발자의 코드의 생산성과 유지보수성이 증가 하게 되었다. 
- 자바스크립트의 ES6가 많은 내용이 바뀌면서 레거시하게 런타임 환경이 초기에는 동작 하지 못했다 즉 과도기가 있었다.
- 브라우저가 ES6의 기능을 모두 제공하지는 못했고 서서히 제공을 하게되었다.
- 모듈 시스템 import export ES6의 문법도 완전히 제거하지 못했다.

 

위에 공백기란 ? 

- ES6의 기능을 런타임환경에서 완벽하게 제공하지 못하다보니 

- ES5로 작성된 모듈 혹은 코드를 사용해야한다.

- ES6를 ES5로 코드를 변환해서 사용을 해야하는데 개발자가 일일히 다 쓰기가 힘들다.

- ES6 -> ES5의 변환작업을 babel이 등장 파일의 내용을 변환해주는 작업을 제공한다.

- 변환작업은 최신 문법을 변환한다.

 

 Webpack
 번들링을 작업을 맡아서 제공한다. (실행 환경의 디렉터리 구조를 구성해준다.)
 프로젝트를 실행할때 실행에 최적화 되어있는 디렉터리 구조로 정의해준다.
 단순하게 정적인 라우팅을 하던 html css js를 직접 작성한 내용을 런타임환경에서 실행하던 때와 달리
 SPA가 등장을 하게되면서 SPA의 기능을 라이브러리 혹은 프레임워크로 제공하게 되었다.
 이 SPA에서는 번들링 작업과 트랜스파일 즉 바벨이 사용되었다. 
 webpack은 기술을 제공하게되었고 우리는 기능을 작성만 하면 되는것
 webpack은 여러개의 모듈을 하나로 합치는 `번들링`

 

webpack의 동작
 javascript의 정적 모듈 번들러 

1. Entry : 시작점 번들링을 시작하는 최초의 파일
2. Output : 번들링을 할때 결과를 내보낼 경로
3. Loader : javascript의 정적 모듈 번들러이지만 이미지 혹은 스타일 등의 다른 파일을 처리할때 사용
4. Plugin : 번들링을 하고 번들된 내용을 런타임환경에서 실행할때 라이브러리 기능이 필요할떄 작성 html파일을 하나 생성해야한다 등

요약
1. webpack : 모듈 의존성 번들링 
2. babel : ES6문법을 ES5문법으로 트랜스파일

 

### babel cli 컴파일
1. 문법 변환 
```sh
npx babel "변환시킬 경로" --out-file "변환해서 내보낼 경로"
# 예 ) app.js
npx babel app.js --out-file dist/app.js
```
2. 모듈 문법 변환
```sh
npm i -D @babel/plugin-transform-modules-commonjs
```

3. JSX 문법 변환
```sh
npm i -D @babel/preset-react

npx babel Main.jsx --out-file dist/Main.js
```

 

이상 바벨에 대한 이야기였습니다.