[WEB] Babel

 

 

 

express를 어떻게 쓸까?

import express from "express";
//const express = require("express");

const app = express();

console.log("Hi!");

위와 같이 express()인 app을 만들면 express 애플리케이션 완성!

 

 

 

 

Babel

https://babeljs.io

Babel · The compiler for next generation JavaScript

 

Babel은 자바 스크립터 컴파일이다

즉 nodeJS가 이해하지 못하는 최신 코드를 문제없이 이해하도록 변환해주는 컴파일러이다

따라서 개발자는 nodeJS가 현재 자바스크립트를 이해하는지 고려하지 않고 사용할 수 있어서 편리한 기능이다

 

 

 

 

 

Babel 사용하는 방법

nodeJS에서 사용 가능한 babel을 설치

터미널에 npm install --save-dev @babel/core

설치 완료 후 package.json을 열어보면 아래와 같은 코드가 추가된 것을 볼 수 있다

 

 

 

 

 

전에 게시물에서 dependencies에 대해 알아보았는데

devDependencies는 말 그대로 개발자에게 필요한 dependencies이다

dependencies는 프로젝트를 실행하기 위해 필요한 것을 말한다

devDependencies는 개발자에게만 필요한 것을 말한다 운전을 더 잘하려면 음악이 있어야 하는 거와 비슷하고 최신 문법의 코드를 작성하려면 필요한 것을 말한다

따라서 babel은 프로젝트를 만들기 위해 없어서는 안 될 필수 사항은 아니지만 개발자의 개발 편의를 높이기 위해서는 필요한 것이라고 볼 수 있다

하지만 babel이 dependencies에 있어도 상관없다

결과적으로 모두 node_modules에 들어가기 때문이다

 

 

 

설치할 때 터미널에 --save-dev를 추가로 입력했는데 이게 나누는 기준이다 

만약 지우고 실행했다면 dependencies로 저장될 거다

깜빡하고 빼고 쳤다면 다시 package.json 파일에서 수정하면 된다 큰 문제가 아니다

 

 

 

babel.config.json

설정 파일을 만들어보자

babel.config.json 파일을 직접 만들어 안에 코드를 쳐보자

지금 하는 건 babel 홈페이지에 다 나와있는 것이다 순서대로 따라 하기만 하면 된다

 

 

 

 

npm i @babel/preset-env --save-dev 실행

 

 

추가된거 확인 가능

 

 

 

앞서 babel을 이용하면 최신 문법 코드를 쓸 수 있다고 했는데 babel도 설정하는 것이 필요하다

그래서 babel.confing.json이라는 파일을 만들면 babel이 알아서 이 파일을 찾고 내용을 본다

안에는 presets가 있기 때문에 최신 자바스크립트 구문을 사용할 수 있게 해주는 것이다

preset도 종류가 엄청 많은데 가장 유명한 것이 env이고 preset은 플러그인이다