바벨(babel), 웹팩(webpack), 폴리필(polyfill) 이란?

compile-time & run-time

compile-time : 바벨이 컴파일 하는 시점

run-time : 브라우저에서 실행되는 시점

웹에서 run-time 환경에는 DOM, ajax, setTimeout과 같이 브라우저에서 제공하는 API같은 WebAPI˗ˋˏ와ˎˊ˗ 이벤트루프, 콜백 큐 등이 포함된다.

Babel

⇒ compile-time에 코드를 구 브라우저에서 사용 가능하게 변환해주는 자바스크립트 컴파일러.

es6 이상에서 새롭게 추가된 Promise, Map, Set과 같은 전역 객체나 전역 객체에 추가된 메서드 등의 complie-time 코드 변환으로는 해결하기 어렵기 때문에 폴리필(polyfill) 이 필요하다.

• 새로운 방식의 자바스크립트로 개발 후 배포할때, 예전방식의 자바스크립트로 변환해서 배포하려고 쓴다. 최신 버전의 자바스크립트가 실행이 안되는 구버전 웹브라우저를 대응하기 위해서.
  ES6 코드를 ES5 코드로 변환해주는 일에서 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리
• 바벨을 사용하려면 node.js 가 있어야하고, 터미널에서 웹팩 관련된 것들을 설치해준다.

Webpack

모듈을 번들 시켜주는 역할을 한다. 빌드라는 과정을 통해 하나의 파일로 만들어 주는데, 빌드란 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 과정을 말하고. 컴파일, 배포 등의 과정이 있다. 빌드하는데 필요한 환경세팅, 플러그인 세팅들을 한번에 세팅하고, 배포환경에서 필요한 세팅을 한번에 모아서 작동하게 함

Polyfill

⇒ run-time에 필요한 기능을 주입하는 것, 즉, 브라우저가 실행되는 시점에 필요한 기능을 주입

폴리필은 최신 ECMAScript 환경을 만들어 준다. 바벨은 es6 ⇒ es5로 변환할 수 있는 것들만 변환을 하는데, es6에서 비동기 처리를 위해 등장한 promise와 같이 es5에서 변환할 수 있는 대상이 없는 경우 에러가 발생한다. 이러한 경우는 폴리필을 이용해서 이슈를 해결 할 수 있다. (웹팩처럼 터미널을 통해 설치)

구 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 babel을 이용했지만, 일부 기능들은 polyfill로 추가해줘야한다!

polyfill 사용법

• ~@babel/polyfill 모듈 사용
• core-js에서 필요한 폴리필 가져오기 (npm : core-js)
• /@babel/preset-env 프리셋 이용하기

---

Codes

// 바벨을 사용하려면 > Node.j가 설치되어있어야하고, 터미널에서 웹팩 관련된 것을 설치해준다.

npm install webpack webpack-cli path --save -dev

// 최신 ECMAScript 환경을 만들어주는 Polyfill

npm install @babel/core @babel/polyfill @babel/preset-env @babel/preset-react 
babel-loader --save-dev

// webpack.config.js 파일을 생성한다.

const path = require('path')
const webpack = require('webpack')

module.exports = {
    mode: "development",
    devtool: "eval",
    resolve: {
        // entry app의 변환할 파일명
        extensions: [".jsx", ".js"],
    },
    entry: {
        // 코드의 시작지점
        app: "./src/app.js", // 여러개일 경우 배열로 나열
    },
    module: {
        // 웹팩이 사용할 플러그인 지정
        rules: [
            {
                // 여러개의 규칙들
                test: /\.jsx?/, // 규칙 적용할 대상 확장자(정규식)
                exclude: '/node_modules/', // 제외
                loader: 'babel-loader', 
                options: {
                    presets: [ // plugin 설정들
                        [
                            ['@babel/preset-env', {
                                targets: { // 예전 브라우저 지원
                                    browsers : ['> 1% in KR']
                                }, 
                                debug : true // 개발용
                            }],'@babel/preset-react', 

                        ]
                    ], 
                    plugin: []
                }
            },
        ],
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({debug: true})
    ], 
    output: { // 컴파일한 코드들의 위치
        path: path.join(__dirname, 'dist'),// 파일이 위치할 디렉토리를 절대경로로 지정
        filename : 'app.js' // 저장할 파일명 지정
    }
};