babel를 쓰는 이유는?

일반적으로 요즘 브라우저들은 ES6문법을 제공한다. 하지만 제공하지 않는 브라우저들도 간간히 존재하는데... IE가 대표적으로 그랬다.
하지만 실제 회사에서 작업을 하다보면 IE에 대해서 신경을 안 쓸 수가 없다.
그렇기 때문에 현재 VanillaJs에 webpack을 설치하고 webpack에 babel을 사용하는게 필요했다.

babel 설치

npm install --save-dev babel-loader babel-core babel-preset-env

우선 webpack 세팅이 되었다는 가정하에 bable을 설치 해준다.

다음으로는 webpack.config.js 내용 추가가 필요하다.

module.exports = {
        target: ['web', 'es5'],
	module:{
            rules : [
                      {
                        test: /\.(js)$/,
                        exclude: /node_modules/,
                        use: ['babel-loader']
                       },
                    ]
         }

}

그리고 추가적으로 root폴더에 .babelrc을 만들어줘야 한다.

그리고 .babelrc에는 아래와 같이 내용 추가가 필요하다.

{
  "presets": [
      [
          "@babel/preset-env"
      ]
  ]
}

다른 블로그에서는 target : ['web','es5'] 를 입력하지 않아도 작동을 하였지만 내가 했을때는 이것을 추가해줘야 IE에서 작동하였다.

babel-polyfill

babel만 설치한다고 모든 ES6->ES5으로 변환해 주지 않는다. ES6에 쓰이는 Promise, Map, Set 같은경우는 babel만으로 변경이 불가능하다. 그래서 babel-polyfill를 세팅해줘야 한다.

우선 babel과 같이 설치가 필요하다.

npm install @babel/polyfill

다음으로 webpack.config.js 에 아래 코드를 추가해준다.

module.exports = {
	entry: ['@babel/polyfill','./src/index.js'],
}

whatwg-fetch

처음에는 babel,babel-polyfill만 추가하면 다 될줄 알았으나.. fetch같은 경우는 IE에서 적용되지 않았다.

MDN에서 찾아보니 IE에서는 적용되지 않는 것이다.

fetch를 사용할 방법은 whatwg-fetch을 설치하는 방법 뿐이었다.

whatwg-fetch도 npm install이 필요하다.

npm i whatwg-fetch

설치가 끝나면 webpack.config.js 소스를 수정해야한다. 여기서 추가된것은 'whatwg-fetch'를 추가 한 것 뿐이다.

module.exports = {
	entry: ['@babel/polyfill','whatwg-fetch','./src/index.js'],
}

결론

사용한 결과 IE에서도 잘 동작하며 생각보다 다양한 브라우저 호환이 쉽지않은 것을 많이 느꼈다.