mac os에서 babel, gulp 사용하기 -1

mac os에서  babel, gulp 사용하기

* 이 글은 2018-06-13에  bebel6를 기준으로 작성된 글입니다.

안녕하세요. 근래들어 es6 공부를 시작했습니다. (하루 됐습니다. ㅋㅋ)

MAC OS 에 바벨을 설치하여 ES6로 작성된 스크립트를 ES5 로 변환하는 세팅을 해보도록 하겠습니다.

알고보면 간단한 작업임에도 불구하고

저는 여타 다른 글들을 참조해서 작업하다 온갖 에러를 마주하며 헤맸는데요.

> 마주한 에러 보기

제가 본 글들은 바벨의 옛날 버전인 BABEL5를 기준으로 작성되어 있기 때문이였습니다.

(babel5에선  npm install babel 으로 설치 완료, 현재는 필요한 모듈을 각각 설치)

현재 BABEL은 7.x 까지 나와있고 6.x 가 안정화 된 버전입니다.

역시 뭐든 기본은 공식 홈페이지 가이드를 먼저 확인하는 습관을 들이는게 정답입니다.

1. node.js 설치

먼저 간편한 모듈 설치를 위해 node.js 를 다운 받습니다.

다운로드 된 .pkg 파일을 실행하여 설치합니다.

간단한 내용이므로 자세한 설명은 적지 않습니다.

정상적으로 설치가 됐는지 확인하기 위해선 터미널을 열고 node -v , npm -v 로 버전을 확인합니다.

2. 터미널을 열어 루트 프로젝트에 npm init 을 실행시킵니다. 

npm init 명령어를 실행시키는 이유는 npm을 통해 설치한 패키지를 관리를 위한 package.json 파일을 생성하기 위해서입니다.

3. 터미널에서 바벨과 관련된 패키지를 설치해줍니다.

 npm install babel-cli babel-core --save-dev

> 바벨 코어와 쉘에서 사용가능한 유틸리티 패키지 설치

npm install babel-preset-es2015 --save-dev

> 오.. 글을 작성하면서 자세한 패키지 설명을 위해 babel-preset-es2015을 찾아봤는데 이 패키지는 deprecated라고 npm사이트에 나와있군요..(ㅋㅋ)

https://www.npmjs.com/package/babel-preset-es2015 
간단하게 설치가 가능하니 babel-preset-env는 아래 링크를 참조하여 다시 설치합니다. (http://babeljs.io/docs/en/env/)

npm install babel-preset-env --save-dev

4. vi를 이용하여 .babelrc 파일을 생성하고 저장합니다.

{"preset":["env"]}

env 프리셋 활성화를 위한 내용입니다.

5. js를 저장할 폴더와 변환 파일을 저장할 폴더 두개를 만들어 줍니다. (필요시)

mkdir js -> 작성한 es6 파일이 저장될 폴더

mkdir build -> es5로 변환된 파일이 저장될 폴더

6. package.json 파일을 열어 scripts 부분에 바벨을 직접 실행하기 위한 명령어를 추가해줍니다.

{

  "name": "es6_project",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "babel js -d build",

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-cli": "^6.26.0",

    "babel-core": "^6.26.3",

    "babel-preset-env": "^1.7.0",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-es2016": "^6.24.1"

  }

}

7. package.json 파일을 저장 후 js폴더 아래 변환 테스트를 위한 간단한 스크립트 파일을 저장합니다.

test.js

const word ='babel';

let test = () => {console.log(`hello ${word} !`)};

8. 저장 후 커맨드 창에 npm run build 를 입력하면 package.json의 "build": "babel js -d build" 명령어가 실행되고 build/ 아래 test.js가 생성된 것을 확인 할 수 있습니다.

<<변환되어 생성된 main.js 내용>>

aa:build aa$ ls

main.js

aa:build aa$ cat main.js 

'use strict';

var word = 'babel';

var test = function test() {

  console.log('I know ' + word);

};

특별한 이미지 첨부 없이 간략하게 작업한 내용만 적었습니다.

지적 사항이 있다면 언제든지 댓글에 남겨주시기 바랍니다.

이상입니다.

참고 사이트

https://babeljs.io/setup.html#installation

https://stackoverflow.com/questions/34483748/running-babel-cli-from-npm-script-not-working

https://steemkr.com/javascript/@codingapple/babel-es6-es5

http://seungdols.tistory.com/537