[인프런] 프론트엔드 개발환경의 이해와 실습 (바벨 사용법과 웹팩 통합)

자주 사용하는 바벨 프리셋을 적용해보고, 웹팩과 통합시켜 사용하는 법을 알아보자.

바벨 사용법과 웹팩 통합

이처럼 바벨은 목적에 따라 몇 가지 프리셋을 제공한다. 바벨에서는 프리셋을 잘 사용하는 것이 중요하다.

• preset-env
  • ECMAScript2015+를 변환할 때 사용한다. 즉, 위에서 우리가 커스텀했던 프리셋과 거의 비슷한 역할을 한다.
• preset-flow
  • flow를 변환하기 위한 프리셋이다.
• preset-react
  • react를 변환하기 위한 프리셋이다.
• preset-typescript
  • typescript를 변환하기 위한 프리셋이다.

 

커스텀 프리셋 대신 preset-env을 적용해보자. 먼저 설치를 해야한다.

$ npm install -D @babel/preset-env

 

그리고 바벨 설정 파일에 적용시킨다.

babel.config.js

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

그리고 npx babel ./src/app.js 로 빌드하면 위에서 만들었던 my-babel-preset.js와 같은 결과를 출력한다.

 

env 프리셋에 추가적인 설정을 해줄 수 있다. 작성한 코드가 크롬 최신 버전만 지원할 예정이라고 가정하자. 그러면 인터넷 익스플로러를 위한 코드 변환을 할 필요는 없다. 따라서, target 옵션에 브라우저 버전명만 지정하면 env 프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해 준다.

babel.config.js

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

 

 

폴리필

변환과는 조금 다른 폴리필에 대해 알아보자. ECMAScript2015의 Promise 객체를 사용하는 코드를 추가했다.

./src/app.js

...

new Promise();

env 프리셋으로 변환을 시도했지만 Promise는 그대로 변함이 없었다. target에 인터넷 익스플로러 버전을 명시하고 빌드해도 인터넷 익스플로러가 Promise를 지원하지 않기 때문에 해석하지 못하고 에러를 던지게 된다.

플러그인이 Promise를 ES5 버전으로 변환할 것으로 기대했지만 예상과 달랐다. 바벨은 ES5로 변환할 수 있는 것들만 빌드하기 때문에 변환되지 못한 것들은 폴리필이라는 코드조각을 추가해서 해결해야 한다.

 

Promise는 ES5 버전으로 대체할 수 없어서, ES5 버전으로 구현한 core-js promise를 사용해 폴리필을 지정했다.

먼저 core-js를 설치했다.

$ npm install core-js@2

 

그리고 env 프리셋에 폴리필을 지정해준다.

babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79',
                ie: '11'
            },
            useBuiltIns: "usage", // 폴리필 사용 방식 지정
            corejs: {
              version: 2 // 폴리필 버전 지정
            }
        }]
    ]
}

useBuiltIns는 어떤 방식으로 폴리필을 사용할지 설정하는 옵션이다. "usage", "entry", false 세 가지 값을 사용하고, 기본 값은 false이다. usage나 entry를 설정하면 폴리필 패키지 중 core-js를 모듈로 가져온다.

npx babel ./src/app.js 로 빌드하면 core-js 패키지로부터 Promise 모듈을 가져오는 코드가 추가됨을 확인할 수 있다. 이제야 인터넷 익스플로러에서 안전하게 돌아가는 결과믈을 만들었다.

 

웹팩으로 통합

실무에서는 바벨을 직접 명령어로 사용하기 보다는 웹팩에서 통합하여 사용한다. babel-loader 즉, 로더 형태로 제공한다.

먼저 설치를 해보자.

$ npm install -D babel-loader

웹팩 설정에 로더를 추가하자. 로더니까 module의 rules 배열에 작성하면 된다.

webpack.config.js

module.exports = {

...

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ]

...

js 확장자로 끝나는 파일은 babel-loader가 처리하도록 설정했다. 사용하는 써드파티 라이브러리가 많을수록 babel-loader가 느리게 동작할 수 있는데 node_modules 폴더를 로더가 처리하지 않도록 예외 처리해주었다.

 

---

처음부터 정리해보자.

바벨은 일관적인 방식으로 코딩하면서 다양한 브라우저에서 돌아가는 애플리케이션을 만들기 위한 도구이다.

바벨의 코어는 파싱과 출력만 담당하고, 변환은 플러그인이 처리한다.

여러 개의 플러그인들을 모아놓은 세트를 프리셋이라고 하며, ECMAScript+ 환경에서는 env 프리셋을 사용한다.

바벨이 변환하지 못하는 코드는 폴리필이라는 코드 조각을 불러와 결과믈에 로딩해서 해결할 수 있다.

babel-loader로 웹팩에 적용시켜 사용하면 훨씬 더 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있다.

 

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습