babel 직접 설정해보기

1.  기본 

웹팩의 등장 배경과 마찬가지로 브라우저는 자바스크립트의 발전 속도를 따라오지 못하면서 es5 이후의 문법들을 직접적으로 해석할 수 없다. 때문에 화살표 함수라던가 let cont 변수, jsx, 타입스크립트 등의 문법들을 브라우저가 알고 있는 자바스크립트 문법으로 변환시켜줘야 함.  이러한 도구를 트랜스파일러 라고 하는데 babel은 트랜스파일러 중 하나.

Babel의 동작(빌드)은 3단계로 진행된다. Parsing -> Transforming -> Printing 

npm install -D @babel/core  @babel/cli

바벨을 사용하기 위해 babel/core 와 커맨드 라인 인터페이스인 babel/cli를 개발 모드로 설치해줌.

// ./src/math.js
const sum = (a, b) => a + b;

위와 같이 코드를 작성해 준 후 cli 를 통해 트랜스파일을 시도

npx babel src/math.js

화살표 함수를 function 함수를 바꿔 줄 것이란 기대와 달리 원형 그대로가 결과물로 나온다. 

이러한 이유는 babel 자체는 Parsing과 Printing만 담당하기 때문이다.

중간 과정이 Transforming은 바벨의 플러그인을 통해 이루어진다. 

2.  플러그인

플러그인을 사용하는 방법은 2가지가 있다.

1) 나만의 babel config 파일을 생성해 준 후 아래의 cli 대로 입력해주기

npx babel [source file path] --config-file [my babel config file path && file name]

cf) npx babel --help를 입력하면 옵션들에 대해 자세히 알 수 있음

2) 루트 경로에 babel.config.js 또는 .babelrc (JSON 형식 파일 )을 생성해 준 후 아래 명령어를 실행시켜주면 바벨 자체가 config 파일을 찾아서 요구하는 바를 이행해준다.

npx babel [source file path] --out-file [destiny file path]

config 파일 안에는 자바스크립트의 어떠한 문법을 변환 시켜줄지 지정해준다.

예를 들어, 화살표 함수에 대해 function으로 바꿔줄 것이라면 아래처럼 플러그인의 내용을 넣어주면 된다.

( 사용할 플러그인은 라이브러를 설치부터 해야 함. npm install -D @babel/plugin-transform-arrow-functions)

// babel.config.js

module.exports = {
    plugins: ['@babel/plugin-transform-arrow-functions']
};

// .babelrc (JSON 형식) 
// {
//    "plugins": ["@babel/plugin-transform-arrow-functions"]
//  }

npx babel src/controllers/math.js --out-file ./math-compiled.js

위의 명령어를 입력해주면 나는 루트에 결과물이 나오도록 해놨으므로 

// math-compiled.js

const sum = function (a, b) {
  return a + b;
};

위와 같은 결과물이 나온다. 

화살표 함수 플러그인 이외에 

const,let 같은 블록 스코핑을 갖는 변수를 var(함수 스코프)로 바꾸는 플러그인과

엄격 모드(use strict)를 사용하게 하는 플러그인이 있다.

"@babel/plugin-transform-block-scoping",
"@babel/plugin-transform-strict-mode",

3. 프리셋 

위와 같이 필요한 플러그인들을 일일이 설치하고 설정하는 것은 번거로우므로 이것을 세트로 묶은 것이 필요해서 생긴 프리셋

프리셋: 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것

바벨에서 제공하는 프리셋은 아래와 같음.

• preset-env (연도 별로 제공되던 프리셋을 하나로 묶음 - config 내에서 옵션값들에 따라 목적에 맞게 사용가능)
• preset-flow
• preset-react
• preset-typescript

npm install -D @babel/preset-env

// babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
}

4. 웹팩과 통합해보기

바벨을 직접 사용하는 것보단 웹팩의 loader를 통해 사용하는 것이 일반적.

npm install -D babel-loader

// webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ],
  },
}

 

 

 

바벨은 일관적인 방식으로 코딩하면서, 다양한 브라우져에서 돌아가는 어플리케이션을 만들기 위한 도구다.

바벨의 코어는 파싱과 출력만 담당하고 변환 작업은 플러그인이 처리한다.

여러 개의 플러그인들을 모아놓은 세트를 프리셋이라고 하는데 ECMAScript+ 환경은 env 프리셋을 사용한다.

바벨이 변환하지 못하는 코드는 폴리필이라 부르는 코드조각을 불러와 결과물에 로딩해서 해결한다.

babel-loader로 웹팩과 함께 사용하면 훨씬 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있다.