본문 바로가기
Tools/VSCode

[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정

by 썸머워즈 2022. 3. 2.
반응형

바벨을 설정하기에 앞서 바벨에 대해서 알아두면 좋은데,

쉽게 말하면 최신 사양의 자바스크립트 코드 (ES6+)를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링) 시켜주는 녀석이라고 할 수 있다.

 

실제로 공식 웹사이트에서도 다음과 같이 설명하고 있다.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

 

이제 바벨 설정을 하나씩 해보도록 하자.


1. Babel Core 와 Babel Cli 설치

(설치하기 전에 package.json이 당연히 있어야 한다는 점 잊지말자.)

 

아래 명령어를 통해 설치를 진행해주자.

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

@babel/core : 바벨의 코어 패키지

@babel/cli : 커맨드라인에서 파일을 컴파일하게 해주는 CLI 제공

 

▷ 결과 (package.json)

아무래도 웹팩과 동시에 진행하다보니 점점 복잡해진다.


2. Babel Preset 설치 및 설정

여기서도 아래 명령어를 통해 설치해주자.

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

@babel/preset-env : Babel플러그인을 모아둔 것으로 Babel프리셋이라고 부른다. 바벨 플러그인은 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타내는데 그러한 규칙들을 모아둔 것이라고 생각하면된다.

 

바벨 프리셋의 경우 설치에서 끝나는게 아니라 설정도 같이 해주어야 하는데,

사실 여기서 설정하는 방법이 여러개가 존재한다.

 

전체 설정 파일babel.config.js / babel.config.json 파일을 만들어 설정하는 방법이 있고(바벨 7버전부터 생겼다더라)

지역 설정 파일.babelrc 파일과 package.json 에 babel key를 넣어서 설정하는 방법이 존재한다.

 

여기서 전체 설정과 지역 설정이 겹치는 설정이 존재할 경우 지역 설정으로 덮어진다. (쉽게 전역 변수를 지역변수로 덮는다 생각하면 된다.)

 

여기서는 그럼 일단 babel.config.json을 만들어 설정하는 법을 배워보도록 하자.

(package.json과 동일한 위치에 만들어주면 된다.)

 

▷ 결과 1(package.json)

▷ 결과 2(babel.config.json)

 


3. Babel Loader 설치 및 설정

babel-loader웹팩이 모듈을 번들링할 때 바벨을 사용하도록 도와주는 역할이다.

아래 명령어를 통해 설치해주자.

npm install --save-dev babel-loader

 

설치가 완료됐으면 webmap.config.js로 가서 loader 설정을 진행해주자.

 

▷ 결과 1(package.json)

▷ 결과 2(webpack.config.js)

const path = require('path');

module.exports = {
    mode: "development",
    entry : "./src/index.js",
    output : { 
        path : path.resolve(__dirname, "bundleBuild"),
        filename : 'build.js'
    },
    module: {
        rules: [
            {
                test : /\.js$/,
                exclude: /node_modules/,
                use : "babel-loader"
            },
            {
                test : /\.css$/,
                use : ["style-loader", "css-loader"]
            }            
        ],
    },
}

 

자 준비가 끝났으니 이제 웹팩을 빌드하면 어떻게 될까...?

그렇다 코드에 따라 다르겠지만 클래스와 Map() Set() 등을 넣은 코드가 있다보니 와장창 에러가 발생하였다.

좀 더 추가 작업을 해보자.


4. babel polyfill 설정

Babel 7.4.0 부터는 @babel/polyfill 이 사용되지 않기때문에 다른 방법을 사용해주어야한다.

그래서 필요한게 core-js인데 두가지 방법을 이용해보자.

 

▶ 4 - 1 core-js 사용

 

우선 아래와 같은 명령어를 통해 core-js를 설치해보자.

npm install core-js@3

그리고 babel.config.json 파일을 다음과 같이 설정한다.

그리고 다시 웹팩을 빌드하면 잘될까?

 

그렇다 너무 잘된다.

하지만 이 방식은 잘 사용되지 않는다고한다. 전역(global)이 오염되는 아주 무서운 녀석이기 때문이다.

 

그래서 더 나은 방법을 위해 다음 방식을 이용해주도록 하자.

 

▶ 4 - 2 plugin-transform-runtime 사용

 

아래 명령어로 필요한 것을 추가해주자.

npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime-corejs3

 

그리고 babel.config.json 파일을 다음과 같이 설정해주면 끝이다.

다시 웹팩을 빌드해보면 잘되는것을 확인할 수 있을것이다.


그래서 최종적으로 살펴보면

 

package.json은 다음과 같다.

 

여기까지 기본 설정을 다 마치고 웹팩 빌드까지 잘되는것을 확인했는데,

어째서 IE에서 안되는것인지는 좀 찾아봐야할 것 같다... 왜 안될까?😂

반응형

태그

,


댓글 0

TOP