Babel.js

Babel.js

바벨이란?

자바스크립트의 ES6의 코드를 EX5 코드로 변환해주고,
리액트의 JSX 문법, 타입스크립트, 코드 압축, Proposal 까지 처리해줍니다.

Babel package 설치

프로젝트에 따라 설정이 다를 수 있으므로 전역으로 설치하지 말고 로컬로 설치한다.

yarn init -y
yarn add @babel/cli  
		 @babel/core 
		 @babel/preset-env	
         

Babel 공식 프리셋

• @babel/preset-env
• @babel/preset-react
• @babel/preset-flow
• @babel/preset-typescript

---

Babel 프리셋 설정

"presets": ["@babel/env"]를 package.json에 추가한다.

{
  ...
 "babel": {
   "presets": ["@babel/env"]
 },
  ...
}

---

babel.config.json 설정

프로젝트의 루트에 babel.config.json을 생성하고 해당 내용을 작성합니다.

{
    "preset" : [
      "@babel/env",
      {
          "targets": {
          "edge" : "17",
          "firefox" : "60",
          "chrome" : "67",
          "safari" : "11.1",
          },
          "useBuitIns": "usage",
          "corejs" : "3.6.4"
      }
	]
}

targets안에 현재 웹애플리케이션이 지원할 브라우저목록을 작성합니다.

---

babel 실행

--out-file 키워드를 사용하지 않으면 콘솔창에 나타난다.

yarn babel [파일] --out-file [변환 후 파일]
yarn babel [파일]