Webpack과 Babel 그리고 Polyfill

Webpack과 Babel 그리고 Polyfill

client side 개발을 위해 구글링 하다 보면, 자주 듣는 이름들이 있다.
깊은 설명은 못하고 간단하게 기록해 본다.

Webpack

웹팩은 의존성을 분석해 모듈들을 하나의 파일로 번들링 시켜주는 역할을 한다.
프로젝트를 개발하다 보면 client side 에서 많은 js 파일을 include 혹은 import 하게 되는데,
이런 파일들이 많으면 브라우져에서 렌더링하기 전까지 요청해야 하는 파일이 많아 지게 된다.
프로젝트의 구조를 분석하고, 자바스크립트 모듈과 css, image 등 여러 리소스들을 번들로 묶어 패킹하는
모듈 번들러(Module Bundler)이다.

Babel

바벨은 최신 JS 문법을 구형 브라우져(IE 라던지, IE 같은, IE들)에서도 작동할 수 있도록 코드 자체를 변환시키는 역할을 한다.
최신 문법을 구형 문법으로 변환 하는 일종의 compiler 혹은 transpiler.

바벨 테스트 하러 가기

Polyfill

폴리필은 js run-time에 필요한 기능을 주입하는 역할을 한다.
Babel이 코드를 구 브라우져에서 사용가능하게 변환하지만, ES5 이상에서 추가된 Promise, Map, Set과 같은 전역 객체나, Array.find, Array.filter 등 전역 객체에 추가된 메소드등을 실행 환경에서 제공하는 역할을 한다.

---

세가지 모두 npm 환경의 nodejs나 react에서 주로 사용하지만, Spring / jsp 환경에서도 위 기능을 필요한 경우가 있다.
이를 위해 Babel에서 browser.js 라는걸 지원 한적이 있고, 가장 최신은 bablel-standalone이 있는 것으로 알고 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
<script type="text/babel" data-presets="es2015">
  const a = (b) => {console.log( b );};
  a('asdf');

  const testTmplt = obj => {
    return `name : ${obj.name} age : ${obj.age}`;
  }
  
  const tmpRes = testTmplt({name:'asdf', age: 10});
  
  const ttTgt = document.getElementById('testTarget');
  ttTgt.innerText = tmpRes;
</script>