3. 프론트엔드 개발환경의 이해: 바벨

5강 내용을 정리한다.

 

https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174#sec1

 

프론트엔드 개발환경 이해 | T아카데미 온라인강의

 

 

바벨(Babel)

---

크로스브라우징 이슈를 해결하는 녀석.

익스플로러는 promise못쓴다거나 이런식으로 브라우저마자 인식할수 있는 버전이 다른다. 바벨은 이런 코드들을 모든 브라우저가 인식할수있도록 하위버전으로 바꾸어주는 역할을 한다. ES6코드를 ES5로 바꾼다거나... 

 

바벨코어가 핵심이고 cli는 터미널에서 사용하는 용도로 설치한다.

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

 

예시를 들어보자

 

app.js:

const alert = msg => window.alert(msg); //const는 ES6 문법

 

바벨은 이렇게 사용할수있다. npx는 npm run script를 더 쉽게 사용할수있는 명령어다. 자세한 내용은 여기와 여기를 참고하자.

$ npx babel ./app.js # const alert = msg => window.alert(msg);

 

바벨은 세 단계로 빌드를 진행한다.

1. 파싱(Parsing)
2. 변환(Transforming)
3. 출력 (Printing)

코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 “파싱”이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 “변환” 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 “출력”하는 것을 마지막으로 바벨은 작업을 완료한다.

 

바벨은 1.파싱과 3.출력만 담당한다. 2.변환은 플러그인이 담당한다. 때문에, 위 코드에서  babel을 해도 결과가 달라지지 않은것! 바벨용 플러그인은 웹팩의 플러그인과 따로 쓴다.

 

 

플러그인

---

커스텀 플러그인

바벨 홈페이지의 예제 코드를 참고하여 예제 코드를 만들어보자.

my-babel-plugin.js : //const를  var로 변경

module.exports = function myplugin() {
  return {
    visitor: {
      // https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-block-scoping/src/index.js#L26
      VariableDeclaration(path) {
        console.log('VariableDeclaration() kind:', path.node.kind); // const
        
        if (path.node.kind === 'const') {
          path.node.kind = 'var'
        }
      },
    },
  };
}

 

그리고 터미널에서 실행한다.

$ npx babel app.js --plugins ./myplugin.js

Error: Cannot find module 'babel-plugin- ::code: 'MODULE_NOT_FOUND' 에러가 뜬다.

 

이것과 비슷한게  block-scoping 플러그인이다.

 

Block-scoping Plugin

설치:

$ npm install -D @babel/plugin-transform-block-scoping

 

실행:

$ npx babel app.js --plugins @babel/plugin-transform-block-scoping # var alert = msg => window.alert(msg);

 

 

프리셋

---

프리셋, config.js

그리고 플러그인을 여러개 설정해주기위해 프리셋을 만든다.

플러그인 묶음이 프리셋이다. 물론 프리셋에 들어가는 플러그인들은 install해주어야 한다.

 

my-babel-preset.js:

module.exports = function mypreset() {
  return {
    plugins: [
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-block-scoping",
      "@babel/plugin-transform-strict-mode",
    ],
  }
}

 

그리고 바벨도 웹팩처럼 babel.config.js를 만들어서 쓰는게 편하다.

 

babel.config.js:

module.exports = {
  presets: [
    './my-babel-preset.js'
  ],
};

 

설정해주면 플러그인 옵션 없이 그냥 'npx babel app.js' 만으로 바벨을 실행할수있다.

 

 

프리셋 패키지 설치

 

물론 이 프리셋도 일일히 설정해주기 귀찮다.

제공되는 프리셋 패키지를 설치해서 사용하자.

설치후 babel.config.js에다가 preset 세팅만 하면 된다.

 

설치

$ npm install -D @babel/preset-env

 

babel.config.js:

// babel.config.js:
module.exports = {
  presets: [
    '@babel/preset-env'
  ]
};

 

env 프리셋

preset-env를 가장 많이 쓴다. 

이 env는 옵션을 변경할수있는데, 대표적인 옵션이 타겟 브라우저 설정이다.

 

babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '79',    //크롬은 79버전
          ie: '11' // ie 11까지 지원하는 코드를 만든다
        }
      }
    ]
  ]
};

 

 

폴리필

화살표함수나 block-scoping같은건 ES5로 바꾸면 되는데, Promise같은건 바꿀 수가 없다. 

대신 Promise로 바꿀순없고, ES5로 구현해놓은건 있다. 이것을 폴리필이라고 한다. 바벨은 이런 폴리필을 지원한다.

못 바꾸는것들은 폴리필이라는 코드조각을 이용하여 대체한다.

 

babel.config.js:

// babel.config.js:
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 폴리필 사용 방식 지정
        corejs: { // 폴리필 버전 지정
          version: 2
        }
      },
    ],
  ],
};

 

이제 빌드하면 core-js에서 프로미스 패키지를 가져오는것을 볼 수 있다.

 

 

 

웹팩에서 사용하기

---

웹팩에서 바벨을 사용할수있다.

실무에선 보통 이렇게 통합해서 쓴다고 한다.

 

바벨로더 설치

$ npm install -D babel-loader

 

웹팩 설정에 로더 추가

webpack.config.js: //node_module안에 있는건 이미 빌드된상태라서 제외했다.

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

 

폴리필 사용설정을 했기때문에 core-js도 설치해야한다. (default가 2버전이라서 @2로 설치)

$ npm i core-js@2

 

빌드

 

$ npm run build

 

참고

---

 

http://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html

프론트엔드 개발환경의 이해: Babel