이안의 평일코딩

[JavaScript] Babel, Webpack, Polyfill이란? 본문

Front-end/JavaScript

[JavaScript] Babel, Webpack, Polyfill이란?

이안92 2021. 3. 8. 18:05
반응형

 

 Babel이란?

 

바벨은 자바스크립트 컴파일러로 새로운 방식의 자바스크립트로 개발 후,

배포할 때에는 예전 방식의 자바스크립트로 변환해서 배포하려고 쓴다.

 

왜 사용할까?

최신 버젼의 자바스크립트가 실행이 안되는 구버젼 웹브라우저를 대응하기 위해서이다.

ES6 코드를 ES5 코드로 변환해주는 일에서 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리해준다.

 

 Webpack이란?

 

웹팩(Webpack)은 모듈을 번들시켜주는 역할을 한다. 빌드라는 과정을 통해 하나의 파일로 만들어 주는데,

빌드란 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 있다.

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

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

 

 Polyfill이란?

 

폴리필(Polyfill)은 최신 ECMAScript 환경을 만들어 준다. 바벨은 ES6 => ES5로 변환할 수 있는 것들만 변환을 하는데,

ES6에서 비동기 처리를 위해 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우 에러가 발생한다.

이러한 경우 우리는 Polyfill을 이용해서 이슈를 해결할 수 있다.

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

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

const path = require('path'); // path 라이브러리를 가져온다
const webpack = require('webpack');

module.exports = {
    mode: 'development', // 개발용이 dev, 실서비스는 production으로 변경
    devtool: 'eval', // 빠르게
    resolve: { // entry app의 변환할 파일명
        extensions: ['.jsx', '.js'],
    },
    entry: { // 코드의 시작지점 (입력)
        app: './src/app.js' // 여러개면 배열로 넣으면 됨
    },
    module: { // 웹팩이 사용할 플러그인 지정
        rules: [{ // 여러개의 규칙들 (배열)
            test: /\.jsx?/, // 규칙 적용할 대상 확장자 (정규 표현식)
            				// jsx? => js, jsx
            exclude: /node_modules/, // 제외
            loader: 'babel-loader',
            options: {
                presets: [ // plugin 설정들의 모음
                    ['@babel/preset-env', {
                        targets: { // 예전 브라우저 지원
                            browsers: ['> 1% in KR'], 
                        }, // 한국에서 1% 이상 점유율 가진 브라우저
                        debug: true, // 개발용
                    }], 
                    '@babel/preset-react'],
                plugins: [],
            },
        }],
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({debug:true}),
    ],
    output: { // 컴파일한 코드를 내놓을 위치 (출력)
        path: path.join(__dirname, 'dist'), // 파일위치할 디렉토리를 절대 경로로 지정
        filename: 'app.js' // 저장할 파일명 지정
    },
}

.babelrc 파일 생성

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

src/app.js

import "@babel/polyfill";

let a = 0;
console.log(a);

 

반응형

 

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../dist/app.js"></script>
</body>
</html>

package.json에 아래와 같이 scripts를 추가해주면 npm run dev으로 실행이 가능하다.

{
  "devDependencies": {
    "@babel/core": "^7.13.8", // 최신문법 바꿔줌
    "@babel/polyfill": "^7.12.1", // 폴리필
    "@babel/preset-env": "^7.13.9", // 환경에 맞게 알아서 바꿔줌
    "@babel/preset-react": "^7.12.13" // 리액트 jsx바꿔줌
    "babel-loader": "^8.2.2", // 바벨과 웹팩 연결
    "path": "^0.12.7",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0"
  },
  "scripts": {
    "dev": "webpack"
  }
}

터미널에서 npm run dev 실행시 app.js의 let이 var로 바뀐다. (ES6에서 ES5로 변환 성공)

 

해당 소스코드

github.com/ianlee92/Babel-practice

 

ianlee92/Babel-practice

Contribute to ianlee92/Babel-practice development by creating an account on GitHub.

github.com

 

반응형

'Front-end > JavaScript' 카테고리의 다른 글

[JavaScript] ES6+ 화살표 함수(Arrow function)  (0) 2021.06.11
[JavaScript] 배열(Array)의 unshift(), push(), shift(), pop()  (0) 2021.05.14
이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임)  (0) 2021.02.26
브라우저 저장소 (쿠키, 로컬 스토리지, 세션 스토리지)  (0) 2021.02.26
[자바스크립트] 가격 숫자 천 단위 , 콤마 찍기  (2) 2021.02.03
'Front-end/JavaScript' Related Articles more
Comments