babel

일반적으로 babel이 무엇을 하는 기능이냐고 물으신다며 es6이상의 문법을 es5로 컴파일해준다고 답할 것입니다.
그러나 babel은 단독으로는 아무런 기능을 하지 않는다고 합니다.
실제로 컴파일해주는 것은 plugin이라고 합니다.
plugin이 최신 ECMAScript를 컴파일하여 오래된 브라우저에서도 구동이 가능하게 합니다.

프로젝트를 진행하다보면 .babelrc 파일을 자주 보게 됩니다.

.babelrc: 바벨 플러그인들을 모아놓고 사용하는 설정파일

이전에는 플러그인으로 stage-0, stage-1와 같은 것들을 사용했는데 바벨 7버전부터는 deprecated되었다고 합니다.
preset이라는 플러그인은 일일히 플러그인들을 설치하기 힘드니 여러 플러그인들을 모아놓은 총 집합체라고 할 수 있습니다.

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

구형 브라우저에서 번들링된 코드량이 너무 많아지게 되어 파일의 양이 매우 커집니다.
그래서 타킷이 되는 브라우저를 지정하여 해당 브라우저에서만 컴파일 되게끔 설정이 가능합니다.
SSR로 구성이 된 경우에는 노드 환경에 대한 설정도 가능합니다.

{
   "presets": [
    ["@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", ">=5% in KR"]
        },
      },
    ],
  ],
}

{
   "presets": [
    ["@babel/preset-env",
      {
        { targets: { node: 'current' } }
      },
    ],
  ],
}

또한 es6문법을 다른 모듈의 타입으로 변경할지 여부도 설정이 가능합니다.

{
   "presets": [
     [
     	"@babel/preset-env",
        {
        	module: false,
        }
    ]
   ],
}

false로 설정을 하면 webpack을 사용하는 경우 import/export구문을 그대로 사용하여 treeshaking이 적용됩니다.