# 22-04-04

# 브라우저 호환성

사용자의 다양한 이용 환경에 대응하자 🛠 (IE, 구버전 브라우저...)

트랜스파일러(transpiler), 코드를 구 표준 준수 코드로 변경

바벨은 ES6+, 타입스크립트, 커피스크립트, JSX .... 다양하게 작성된 코드를 다양한 브라우저에서 동작하도록 호환성을 지켜준다.

npm install @babel/core @babel/cli @babel/preset-env --save-dev

babel.config.json으로 babel 실행 설정을 한다.

{
  "presets": [],
  "plugins": []
}

presets : @babel/preset-env (opens new window)를 사용할 수 있다.
plugins : TC39 프로세스 (opens new window) 0~3단계의 기능과 같이 preset에 포함되지 않는 기능을 별도 플러그인으로 적용할 수 있다.

webpack을 이용하여 entry point로부터 의존되는 모듈을 자동으로 babel로 트랜스파일링 할 수 있다

npm install webpack webpack-cli
npx webpack

webpack.config.js으로 설정 (https://webpack.js.org/configuration/)

Babel Loader (opens new window)를 이용하여 webpack과 babel을 연동할 수 있다.

webpack을 사용하면서 디버깅에 사용하기 위해 source map을 사용해보자

Reference