JavaScript_ Babel

Adela·2020년 11월 16일

JavaScript

목록 보기

16/17

Babel을 node환경에서 사용하려면 @babel/node 패키지를 설치한 후 사용할 수 있다.

바벨(Babel)은 입출력이 모두 자바스크립트 코드이다.
자바스크립트는 매년 발전하고 현재는 ES9 버전까지 있다.

브라우저가 이해하지 못하는 최신 버전의 자바스크립트 문법을 Babel은 브라우저가 이해할 수 있는 문법으로 변환해준다. 따라서 생산성이 향상된다.

다양한 loader 가 있다.

polyfill : 충전 솜

새로운 문법을 구형 자바스크립트 문법으로 바꿔준다.
그런데 문법만 바뀌고 새로운 객체(ex. Promise, Set..)나 새로운 메소드는 사용할 수 없다.
왜냐하면 새로운 기능이라 정의되어 있지 않기 때문이다.

babel-polyfill을 설치해서 이 문제를 해결할 수 있다.

Babel
Javascript의 문법이 아닌 것들을 Javascript에서 사용할 수 있게 해줌
Compile-Time에 실행된다.
Polyfill
새로운 버전이 나왔을 때 브라우저는 Javascript의 문법으로 받아들이긴 하지만 새로운 버전이기 때문에 이해할 수 없다. 따라서 정의되어 있지 않은 객체로 받아들인다. Polyfill은 이때 객체들을 정의해준다.
Run-Time에 실행된다.

바벨을 설정하는 파일
프로젝트 root 폴더에 생성한다.

이 파일에 preset(여러 플러그인의 모음)이나 plugin(추가기능)을 연결한다.
plugin의 예

preset의 예

react 환경을 위한 JSX 플러그인 모음
es2015, es2016, es2017 : 각 ES20** 문법을 사용할 수 있도록 해주는 플러그인 모음
env : 특정 문법의 버전을 입력할 필요 없이, 타겟 브라우저를 입력하면 알아서 사용자의 환경에 맞춰 최신 EcmaScript를 사용할 수 있게 해주는 프리셋, polyfill과는 다른 개념

@babel/cli 문서
webpack으로 빌드하는 방법 외에 직접 CLI로 빌드할 수 있다.

컴퓨터 전역에 설치하는 것보다 프로젝트 로컬로 설치하는 것이 낫다.

설치가 끝나면 package.json - devDependencies에 @babel/cli와 @babel/core 두 항목이 추가되어 있는 것을 확인할 수 있다.

@babel/polyfill 문서
polyfill은 충돌 방지를 위해 한 프로젝트에서 한 번만 import한다.
맨 처음 실행되는 파일에서 import하면 된다.

나는 서버를 열어 NodeJS 환경에서 사용했다. 그래서 Nodemon도 설치했다.

설치
babel, preset,

npm install @babel/node @babel/core @babel/preset-env  nodemon -D

preset 설치
@babel/preset-env
가장 최신의 자바스크립트, 세부적인 문법 변환이 필요없는 preset 이라고 공식문서에 설명되어 있다.
React나 TypeScript를 한다면 공식문서의 다른 종류의 preset이 있다.

.babelrc 파일 생성 후 설정
Babel이 실행되기 전 .babelrc파일을 읽는다.

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

설정 후

// 하위 버전 문법이라 import로 바꾸고 바벨로 실행해본다.
const express = require("express");

// ES6
import express from "express";

ES6 문법이 하위호환 잘 되는지 테스트해본다.
실행 스크립트를 node index.js에서 babel-node index.js해보면 서버가 열린 것을 확인할 수 있었다.

이제 자바스크립트 버전을 신경쓰지 않고 코드를 작성할 수 있게 되었다.

👩🏼‍💻 SWE (FE)