[Typescript & React & Webpack 환경설정 2편] Babel 설정

Babel이란?

• Babel is a JavaScript compiler
• Babel은 JavaScript 컴파일러입니다.
• 정확히 Babel은 JavaScript로 결과물을 만들어주는 컴파일러입니다.

왜 JavaScript로 변환 과정이 필요할까요?

• 현재 프론트엔드는 너무나도 빠르게 발전하고 있습니다.
• 이 때 발생하는 새로운 문법, 여러 기술들이 생기면서 호환성의 문제를 갖게 됩니다.
• 오래된 버전의 브라우저는 이러한 새로운 문법, 새로운 기술들을 적용하기 위해서 변환하는 과정, 즉 Babel이 필요합니다.

이제 Babel을 설정해봅시다.

우선 필요한 패키지를 설정해보겠습니다.
npm i -D @babel/core @babel/plugin-proposal-optional-chaining @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader

• @bable/preset
  • Babel은 그 자체로는 사실상 하는 일이 없고 plugin에 의해서 실행됩니다.
  • 이를 위해 수많은 plugin들이 존재하는데 preset으로 plugin들을 묶어서 사용할 수 있습니다.
  • @babel/preset-env
    • ECMAScript2015+를 변환할 때 사용합니다.
    • 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만, 지금은 env하나로 합쳐졌습니다.
  • @babel/preset-react, @babel/preset-typescript
    - react, typescript 문법을 javascript로 바꾸기 위한 plugin들이 묶여있습니다.
    
    

• babel.config.js

module.exports = (api) => {
  api.cache(true);

  const presets = [
    [
      '@babel/preset-env',
      {
        targets: '> 0.25%, not dead',
        useBuiltIns: 'usage',
        corejs: 3,
        shippedProposals: true,
        modules: false,
      },
    ],
    '@babel/preset-typescript',
    '@babel/preset-react',
  ];

  const plugins = ['@babel/plugin-proposal-optional-chaining'];

  return {
    presets,
    plugins,
  };
};

• targets : 프로젝트를 지원 / 대상으로하는 환경을 결정할 수 있습니다.
• useBuiltIns : poly-fill 을 처리하는 방법을 결정합니다.
• corejs : @babel/polyfill이 deprecated 되면서 대체로 corejs 옵션을 사용합니다.
• shippedProposals : 브라우저에 제공된 기능 제안에 대한 지원을 활성화
• modules : ES 모듈 구문을 다른 모듈 유형으로 변환 할 수 있습니다.
  @babel/preset-env 에 대한 더 자세한 내용을 확인하고 싶다면 여기를 눌러주세요