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

TwentyFiveSeven·2021년 1월 4일
3

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 에 대한 더 자세한 내용을 확인하고 싶다면 여기를 눌러주세요
profile
부지런한 웹개발자🌙

0개의 댓글