[JavaScript_study] 바벨 (Babel)

* 바벨 (Babel)

• 바벨을 이용해 최신문법으로 작성하고 예전 버전으로 변환이 가능하다.
• react, node등 최신 프레임워크는 바벨과 같은 툴들이 전부다 들어있기 때문에 우리가 신경쓰지않고 최신문법으로 개발을 하면 나중에 프로젝트를 빌드해서 사용자에게 배포하는 코드에는 예전 자바스크립트 버전으로 변환해주는 기능이 포함되어 있다.
• 순수 자바스크립트로 프로젝트를 진행하다가 예전 브라우저를 사용하는 유저에게까지 지원을 해야한다면 babel을 사용해서 버전을 내려서 빌드해야한다.
• 타입스크립트 컴파일러는 TS를 JavaScript로 변환하는 용도로도 사용한다. // 하지만 최신 JS코드를 예전 JS코드로 변환하는데 사용할 수 있다.

* 바벨 실습해보기

• https://babeljs.io 사이트에 들어가서 상단에 Try it out을 클릭한다.
• 왼쪽칸에 TARGETS안에 not ie 11, not ie_mob 11를 삭제해서 인터넷 익스플로어를 대상으로 설정 해준다. 이후 코드를 작성한다.
• 너무 불필요하게 모든버전을 지원하게 만들기보다는 내가 배포하고자하는 주된 사용자들이 어떤 브라우저 버전을 사용하는지 확인후 사용하는것이 좋다.

* VScode setup

• npm init를 통해서 npm을 셋업한다.
• 아래의 명령어를 통해서 바벨을 set up 해준다. (babel공식 사이트에서 Setup페이지에서 확인후 Setup을 할 수 있다.)
  • npm install --save- dev @babel/core @babel/cli @babel/preset-env

• package.json안에 scripts를 "build": "babel index.js -w -o build/index.js"
  • index라는 파일이 변경될 때 마다 우리가 빌드를 하고 싶으니 watch모드( -w )를 추가해준다.
• babel.config.json파일을 만들고 preset json안에 @babel/preset-env를 사용한다 셋팅해주고 targets를 설정해준다.
• npm run build로 실행시킨다.

 

* babel.config 파일

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "8",
                    "firefox": "12",
                    "chrome": "12",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.5"
            }
        ]
    ]
}