바벨 설정 쌩기초 - import statement vs require method 를 중심으로

유나니·2021년 2월 14일

javascript_til

목록 보기

7/8

바벨이란 무엇인가

babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러입니다.
(출처: 위키피디아)

뷰나 리액트로 프로젝트를 하기 위해 프로젝트를 생성하면 웹팩이랑 바벨이 자동으로 딸려오기 때문에 별 생각 없이 개발에만 열중할 수 있었다. 하지만 express를 처음 공부하면서 바벨의 소중함에 대해 새삼 깨닫게 되어 쌩기초 바벨 설정을 포스팅하고자 한다.

import statement vs require method

SyntaxError: Cannot use import statement outside a module

create react-app vue create를 통해 제공되는 바벨에 익숙해져 너무나도 당연하게 필요한 모듈을 import했기 때문에 해당 에러를 접하게 되면 당황할 수 있다. 나도 당황해서 삽질 한 끝에 이 포스트를 남기는 거니깐... 우선 import와 require()의 차이에 대해 알아봐야 한다.

es6 vs before es6...

둘 다 모두 하나의 파일에서 다른 파일의 코드를 불러오기 위해 사용한다. 다만 import는 es6에서부터 새롭게 도입된 키워드 중 하나이다. 따라서 원래부터 있던 키워드가 아니라는 것이다. 따라서 import 가 나오기 전에는 require()를 통해 모듈을 불러왔다.

모듈 익스포트

function a() {
	console.log('hello world')
}
 module.exports = {
 	a: a
 }

모듈 임포트

const utils = require('./utils.js')

utils.a();

다음과 같은 방식은 commonjs 방식으로 브라우저 환경은 물론 NodeJS 에서도 사용된다. 따라서 노드 환경에서 es6의 모듈 방식을 사용하게 되면 SyntaxError를 출력한다. 노드 환경에서 import를 사용하려면 바벨을 통해 commonjs 방식으로 트랜스파일링이 필요한데 이 때 필요한 것이 바벨과 바벨 설정이다.

express 프로젝트를 위한 바벨 세팅하기

1. 바벨 설치

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

2. 바벨 설정파일 작성하기(.babelrc)

프로젝트 루트에 .babelrc 파일을 생성하고 다음과 같이 작성한다.

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

3. package.json 수정하기

npm 명령어를 사용해 index.js 파일을 실행하거나 테스트코드를 실행하기 위해서는 package.json에 스크립트를 등록해 사용한다. 이 때 babel-node로 트랜스파일링한 이후 파일을 실행하도록 해야 import statement와 export statement를 사용할 수 있다.

{
  "scripts": {
    "test": "mocha babel-node utils.spec.js",
    "start": "babel-node index.js",
    "dev": "nodemon --exec babel-node index.js"
  },
}