[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      

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