자바스크립트 babel 사용 해볼래요?

바벨은 무엇일까요?

공식 홈페이지에서 아래와 같이 정의했습니다.

바벨은 자바 스크립트 컴파일러입니다.
Babel은 주로 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용되는 툴체인입니다. Babel이 당신을 위해 할 수있는 주요 일은 다음과 같습니다.

 

쉽게 말하면 es6이상 문법으로 작성된 코드를 es5로 변경해준다는거에요.

왜냐면 자바스크립트는 문법적으로 빠르게 변하는데 시스템에 따라 브라우저나 노드버전을 지속적으로 올릴수 없는 경우가 있으니까요

특히 브라우저의 업데이트 속도는 자바스크립트의 변화보단 많이 뒤쳐지고요

그래서 그냥 옛날거에서도 돌아가게 코드 변환해버리는거에요

 

바벨 을 사용하려면 몇가지 툴만 설치하면 되요

요즘은 진짜 완전 편해졌어요

 

package.json을 보시면 필요한 모듈이 3가지밖에 되지 않아요

package.json
{
    "name": "babel-sample",
    "version": "1.0.0",
    "description": "",
    "main": "lib/index.js",
    "scripts": {
        "build": "babel src -d lib",
        "start": "npm run build && node ."
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.21.0",
        "@babel/core": "^7.21.0",
        "@babel/preset-env": "^7.20.2"
    }
}

바벨 설정을 해야 되는데 이미 만들어진 preset 가져다가 이거만 쓸게요

babel.config.js

module.exports = {
    presets: ["@babel/preset-env"],
};

 

바벨 설정파일보면 정말 많은 이름으로 제각각 다르게 쓰는데 아래 링크 참고하세요

저는 프로젝트전체에 적용시키고 싶고 json 보단 js가 좋아서 babel.config.js 파일로 정의했어요

Config Files · Babel (babeljs.io)

Config Files · Babel

 

바벨은 여러가지 플러그인의 조합으로 변환을 하는건데 프리셋이란 이러한 플러그인들의 조합 미리 만들고 설정해 놓은거에요

일반적으로 @babel/preset-env 을 사용하면 nodejs 기준으로 왠만한건 다 되요

글 작성 기준 preset-env의 버전은 7.20.2인데 예전에는 에러 많이 나와서 플러그인 추가로 많이 설치해야됬는데 지금은 잘되네요

먼가 안되는건 검색하면서 플러그인을 추가시켜주면되요

import 구문부터 class 정의가 까지 진짜 다 잘되네요

 

참고로 바벨 공식 프리셋은 다음과 같이 4개가 있습니다.

@babel/preset-env for compiling ES2015+ syntax
@babel/preset-typescript for TypeScript
@babel/preset-react for React
@babel/preset-flow for Flow

 

react 개발하시는분들은 create-react-app 이거 사용하실텐데 react-scripts 모듈이 webpack 설정부터 다 잡아주니까 특별이 건드릴일이 없어요

 

바벨공부하시다가 보면 폴리필이란 단어를 보게 되는데

폴리필은 바벨로 코드 변환 시 바벨이 알수 없는 모듈들을 사용하게 되면 변환이 안되요

그래서 그러한 것들을 미리 정의해서 import 시키면서 변환해주는건데 대부분 브라우저 환경에서만 제공되는 글로벌 api 들이에요

노드에서는 폴리필 설정하지 않아도 잘되요

혹시 폴리필에 관해 알고 싶으신분은 여기보세요

@babel/polypill 은 예전에 사용하던 방식이니 그거 말고 아래 링크쪽 참고 하시면되요

@babel/plugin-transform-runtime · Babel (babeljs.io)

@babel/plugin-transform-runtime · Babel