Preset

• ECMAScript2015+으로 코딩할 때 필요한 플러그인을 일일이 설정하는 것은 피곤한 일
• 목적에 맞게 여러가지 플러그인 세트로 모아놓은 것을 '프리셋'이라 한다.

커스텀 프리셋

module.exports = function myBabelPreset() {
  return {
    plugins: [
      "@babel/plugin-transform-block-scoping",
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-strict-mode"
    ]
  }
}

babel.config.js

• preset 배열에 커스텀 프리셋 경로를 기입

module.exports = {
  presets: [
  	'./my-babel-preset.js'
  ]
}

바벨이 제공하는 프리셋

실무에서는 개별플러그인, 커스텀프리셋을 사용하지 않고 제공되는 프리셋을 사용한다.
바벨은 목적에 따라 몇가지 프리셋을 제공한다

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

preset-env

• ECMAScript2015+를 변환할 때 사용한다.
• 바벨7 이전 버전에는 연도별로 각 프리셋을 제공했지만 지금은 env 하나로 합쳐짐

설치

$ npm i -D @babel/preset-env

타겟 브라우저

• target 옵션에 브라우저 버전명만 지정하면 env 프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력한다.

babel.config.js

module.exports = {
  presets: [
  	['@babel/preset-env', {
      targets: {
        chrome: '79',
        ie: '11'
      }
    }],
  ]
}

폴리필

폴리필은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다

• 바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다.
• 그렇지 못한 것들은 폴리필이라고 부르는 코드조각을 추가해서 해결한다.
• ex:) Promise는 ECMAScript5 버전으로 대체할 수 없다. 다만 버전에 맞게 구현은 가능

설치

$ npm i -D core-js

babel.config.js

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

웹팩으로 통합

• 실무에서는 바벨을 직접 사용하기보다 웹팩으로 통합해서 사용하는것이 일반적이다.
• 로더 형태로 제공 babel-loader
• babel-loader로 웹팩과 함꼐 사용하면 훨씬 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있다.

설치

$ npm i -D babel-loader

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './app.js'
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/, // js 파일에
        loader: 'babel-loader', // babel-loader를 동작
        exclude: /node_modules/ // node_modules 라이브러리들을 바벨로더가 처리하지 않도록 제외시킴
      }
    ]
  }
}