[Babel][Window] 1. babel 명령어를 이용한 컴파일 하기

[환경]

Window 10 (꼭꼭 참고하세요 보통의 컨텐츠들은 Linux 환경이라서 미묘하게 명령어가 다를 수 있습니다.) 

 

[목표]

러닝가이드 를 읽고 Babel 명령어를 실행하고 비교하면서, 

 

가이드 문서에서 빠진 디테일(!) 한 내용들을 보여드리고자 작성합니다.

 

프로그래밍을 한지 얼마 안되신 분들을 위해서 디테일한 과정들을 남깁니다. (가끔 이걸 모르고 해매는 분들이 있습니다. )

 

[과정1] 1. 프로젝트 초기화

 

프로젝트를 다음 명령어를 이용해 초기화 합니다. (IDE에 따라서 이과정을 편하게 갈 수도 있습니다. )

npm init -y

 

[과정2] Babel CLI 설치 

npm 명령어를 이용하여, @Babel/core , @Babel/cli 패키지를 설치합니다. 

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

-D : 설치할 패키지들은 개발 의존성으로 설정하는 옵션  참조: npm 개발자 문서

 

과정 2를 통해서 Babel CLI는 로컬 단위로 설치합니다.

글로벌 영역에서의 Babel/core 버전을 설정할 수도 있지만, 로컬로 하는 이유는 종속성 때문입니다. 

 

다른사람들이 무심결에 나의 프로젝트를 사용하려고 하면  @Babel/core와 @Bable/cli의 버전이 안맞아서 원래 되던게 안될 가능성이 있기 때문에 그런 점을 미연에 방지하는 것입니다. 

 

[과정3] 컴파일 명령어 등록  

과정1 에서 생성된 package.json 파일에서 아래의 내용을 추가합니다.

 

{
  "scripts": {
    "start": "npm run compile",
    "compile": "babel src -d dist"
  }
}

 

그래서 나온 내용의 예시는 다음과 같습니다. 

 

컴파일 명령어 Script 코드에 추가한 내용.

 

[과정4] 예시코드 작성.

4-1 프로젝트 루트에서 src 폴더를 생성합니다. 

4-2 다음 index.js ellipseText.js 코드를 작성합니다. 

 

파일 작성 완료 화면

index.js 파일 내용 

import { ellipseText } from './ellipseText.js';
console.log(ellipseText(`Node.js 환경에서 ES 모듈을 사용하려면 mjs 확장자 또는 
     package.json에 type을 module로 설정해야 합니다.`));

elipseText.js

export const ellipseText = (text, limit = 100) => `${text.slice(0, limit)}...`;

 

[과정5] package.json 파일의 컴파일 명령을 실행합니다. 

npm start

 

실제 실행 화면

[과정6] 과정5의 결과 다음 파일을 얻을 수 있습니다.  

 

 

하G만.. 과정6에서 얻어진 이 코드를 이용하지는 못합니다. 기능은 되지만 다양한 환경에서 동작을 못하기 때문이죠.