icon안동민 개발노트

Babel과 Polyfill

 Babel은 최신 자바스크립트 코드를 이전 버전의 자바스크립트로 변환하는 트랜스파일러입니다.

 이는 개발자가 최신 언어 기능을 사용하면서도 구형 브라우저와의 호환성을 유지할 수 있게 해줍니다.

Babel의 주요 기능

  1. 문법 변환 : ES6+ 문법을 ES5로 변환
  2. Polyfill 제공 : 새로운 전역 객체나 메서드를 구현

 이러한 기능들은 크로스 브라우저 호환성 확보에 중요한 역할을 합니다.

Babel 설정

 .babelrc 또는 babel.config.js 파일을 사용하여 Babel을 설정합니다.

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

주요 Babel 프리셋과 플러그인

  1. @babel/preset-env : 대상 환경에 필요한 변환을 자동으로 결정
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ]
}
  1. @babel/plugin-transform-runtime : 헬퍼 함수의 중복을 방지
{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

Polyfill

 Polyfill은 최신 자바스크립트 기능을 구형 환경에서 사용 가능하게 하는 코드입니다.

 @babel/polyfill은 Babel 7.4.0부터 deprecated되었으며, 대신 core-js와 regenerator-runtime을 직접 사용하는 것이 권장됩니다.

import "core-js/stable";
import "regenerator-runtime/runtime";

Babel 7의 주요 변경사항

  1. @babel/polyfill 대신 core-js 직접 사용
  2. 네임스페이스 패키지(@babel/*)
  3. babylon을 @babel/parser로 변경
  4. 새로운 JSX 변환

Webpack과 Babel 통합

 webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

브라우저 타겟팅과 최적화

 @babel/preset-env의 targets 옵션을 사용하여 특정 브라우저를 대상으로 할 수 있습니다.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }]
  ]
}

 useBuiltIns 옵션으로 필요한 폴리필만 포함

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

성능 관련 주의사항

  1. 불필요한 변환 피하기 : 타겟 브라우저 명확히 지정
  2. 캐싱 활용 : babel-loader의 cacheDirectory 옵션 사용
  3. 포함/제외 패턴 최적화
{
  test: /\.js$/,
  exclude: /node_modules/,
  include: path.resolve(__dirname, 'src'),
  use: 'babel-loader'
}

TypeScript와 Flow 통합

  1. TypeScript @babel/preset-typescript 사용
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
  1. Flow @babel/preset-flow 사용
{
  "presets": ["@babel/preset-env", "@babel/preset-flow"]
}

 Babel은 현대 자바스크립트 개발에서 필수적인 도구로, 최신 언어 기능을 사용하면서도 광범위한 브라우저 지원을 가능하게 합니다. Babel의 주요 기능인 문법 변환과 폴리필 제공은 개발자가 최신 ECMAScript 사양을 걱정 없이 사용할 수 있게 해줍니다.

 Babel 설정은 .babelrc 또는 babel.config.js 파일을 통해 이루어집니다. 이 파일에서 사용할 프리셋과 플러그인을 지정할 수 있으며, 이를 통해 Babel의 동작을 세밀하게 제어할 수 있습니다.

 @babel/preset-env는 Babel의 가장 강력한 프리셋 중 하나로, 대상 환경에 필요한 변환과 폴리필을 자동으로 결정합니다. 이를 통해 불필요한 변환을 줄이고 번들 크기를 최적화할 수 있습니다.

 폴리필은 새로운 자바스크립트 기능을 구현하여 구형 환경에서도 사용할 수 있게 해줍니다. Babel 7 이후로는 @babel/polyfill 대신 core-js를 직접 사용하는 것이 권장됩니다. 이는 더 세밀한 폴리필 제어를 가능하게 합니다.

 Babel 7에서는 여러 중요한 변경사항이 있었습니다. 네임스페이스 패키지 도입, 파서 이름 변경, 새로운 JSX 변환 등이 주요 변화입니다. 이러한 변경사항들은 Babel의 사용성과 성능을 개선하는 데 기여했습니다.

 Webpack과 Babel의 통합은 babel-loader를 통해 이루어집니다. 이를 통해 Webpack 빌드 프로세스에 Babel 변환을 쉽게 통합할 수 있습니다.

 브라우저 타겟팅은 @babel/preset-env의 targets 옵션을 통해 이루어집니다. 이를 통해 특정 브라우저 버전을 대상으로 하는 최적화된 코드를 생성할 수 있습니다. useBuiltIns 옵션을 'usage'로 설정하면 실제 사용된 기능에 대한 폴리필만 포함되어 번들 크기를 줄일 수 있습니다.

 Babel 사용 시 성능 이슈에 주의해야 합니다. 불필요한 변환을 피하고, 캐싱을 활용하며, 포함/제외 패턴을 최적화하는 것이 중요합니다. 특히 대규모 프로젝트에서는 이러한 최적화가 빌드 시간을 크게 단축시킬 수 있습니다.

 TypeScript나 Flow와 같은 정적 타입 시스템과 Babel의 통합도 가능합니다. @babel/preset-typescript나 @babel/preset-flow를 사용하면 이러한 언어로 작성된 코드도 Babel을 통해 변환할 수 있습니다. 이는 타입 체크와 변환을 분리하여 더 빠른 빌드를 가능하게 합니다.

 결론적으로, Babel은 현대 자바스크립트 개발의 핵심 도구로, 개발자가 최신 언어 기능을 자유롭게 사용하면서도 광범위한 브라우저 지원을 유지할 수 있게 해줍니다. 적절한 설정과 최적화를 통해 Babel은 개발 생산성과 애플리케이션 성능을 모두 향상시킬 수 있습니다. 그러나 Babel의 강력한 기능을 효과적으로 활용하기 위해서는 지속적인 학습과 최신 동향 파악이 필요합니다.

이전으로다음으로