[Babel] 바벨 사용법과 웹팩 통합

상민·2022년 8월 3일

babel

프론트엔드 개발환경의 이해와 실습

목록 보기

7/14

프리셋 사용하기

바벨은 목적에 따라 몇 가지 프리셋을 제공한다

preset-env
preset-flow
preset-react
preset-typescript

preset-env는 ECMAScript2015+를 변환할 때 사용한다
preset-flow preset-react preset-typescript는 flow, react, typescript를 변환하기 위한 프리셋이다

IE 지원을 위해 env 프리셋을 사용해 보자

npm install -D @babel/preset-env

이전 시간에 만들었던 커스텀 프리셋 설정을 지우고 설치한 preset-env를 등록해주자

babel.config.js

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

그리고 바벨을 실행시켜 빌드 결과를 확인해보면 이전에 등록한 커스텀 프리셋의 빌드 결과와 동일하다

npx babel app.js

// 실행 결과
"use strict";

var alert = function alert(msg) {
  return window.alert(msg);
};

env 프리셋 설정과 폴리필

1. 타겟 브라우저

우리 코드가 크롬 최신 버전만 지원한다고 했을 때 인터넷 익스플로러를 위한 코드 변환은 불필요하다
targets옵션에 브라우저 버전명만 지정하면 env 프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해낸다

타겟 브라우저는 preset을 사용할 때 특정 브라우저를 지원해야 할 때 지정해주면 된다

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "103", // preset-env가 크롬 103버전까지 지원하는 코드를 만든다
        },
      },
    ],
  ],
};

기존 코드에서 preset-env에 옵션을 주기 위해 배열로 한번 더 감싸고 두 번째 인덱스에 객체 형식으로 targets 옵션을 지정한다
targets 옵션에 chrome 프로퍼티의 값으로 "103"을 입력하면 preset-env가 크롬 103버전까지 지원하는 코드로 변환한다

npx babel app.js

// 실행 결과
"use strict";

const alert = msg => window.alert(msg);

2. 폴리필

app.js 코드를 아래와 같이 수정해보자

app.js

new Promise()

Promise는 ES6 문법으로 ie 버전 11에서는 지원하지 않는 문법이다
바벨을 실행해서 빌드해보자

npx babel app.js

// 실행 결과
"use strict";

new Promise();

하지만 실행해보면 Promise가 그대로 나오는 것을 볼 수 있다

바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다
그렇지 못한 것들은 폴리필이라고 부르는 코드조각을 추가해서 해결한다

ECMAScript2015의 const, let, 화살표 함수들은 ECMAScript5의 var, 일반 함수로 대체할 수 있다
하지만 Promise는 ECMAScript5 버전으로 대체할 수 없다

다만 ECMAScript5 버전으로 구현할 수는 있다
(이러한 폴리필을 제공하는 라이브러리 중 대표적인 것이 core-js, babel-polyfill)

preset-env에서 useBuiltIns 옵션을 통해 폴리필을 사용할지 설정할 수 있다
useBuiltIns는 usage, entry, false 세 가지 값을 사용한다
기본값은 false이고 usage나 entry를 설정하면 폴리필 패키지 중 core-js를 모듈로 가져온다

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "103", // preset-env가 크롬 103버전까지 지원하는 코드를 만든다
          ie: "11",
        },
        useBuiltIns: "usage", // 폴리필 사용 방식 지정 'entry', false
        corejs: {
          version: 3, // 폴리필 버전 지정
        },
      },
    ],
  ],
};

npx babel app.js

// 실행 결과
"use strict";

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

new Promise();

여전히 new Promise()를 사용하지만 core-js 패키지로부터 Promise 모듈을 가져오는 구문이 상단에 추가되었다

웹팩으로 통합

실무 환경에서는 바벨을 직접 사용하기 보다 웹팩으로 통합해서 사용하는 것이 일반적이다
로더 형태로 제공하는데 babel-loader가 그것이다

npm install -D babel-loader

webpack.config.js

   ...

entry: {
    main: "./app.js",
  },
    
   ...
 
   {
      test: /\.js$/,
      loader: "babel-loader",
      exclude: /node_modules/, // node_modules에 있는 코드는 제외
   },

   ...

entry 경로는 루트 디렉토리에 있는 app.js를 번들링 할 것이므로 ./app.js로 설정한다
babel-loader를 설정하려면 로더를 설정하는 module 객체의 rules 배열 안에 코드를 추가해준다

하지만 npm run build 명령어를 통해 웹팩을 빌드해보면 에러가 날 것이다

웹팩이 babel-loader를 통해 바벨이 빌드한 app.js파일을 불러올 것인데 app.js에서는 Promise를 사용했기 때문에 core-js 폴리필을 통해 코드를 변환했다
그 과정에서 상단에 core-js 모듈을 가져오는 구문이 추가됐는데, 웹팩이 이를 찾지 못하기 때문에 에러가 난 것이다

따라서 core-js 모듈을 설치해주자