안녕하세요. 초보입니다.


오늘은 자바스크립트 환경설정을 위해 npm, gulp, babel을 설치해 보겠습니다.

(homebrew 설치되어 있다는 가정하에 진행 --> 혹시 모른다면? 해당 포스트 참고)


[개념]

NPM: 패키지 관리 툴

GULP: 자바스크립트 빌드 툴

BABEL: ES6 문법을 ES5문법으로 변환시켜 주는 툴

ESLINT: 자바 스크립트 코드 인스펙션



[NPM 설치]

터미널에서 

brew install npm




[GULP 설치]

터미널에서 

npm install -g gulp


(여기서 -g는 글로벌을 의미함)


[BABEL 설치]

npm install --save-dev gulp gulp-babel babel-core babel-loader



.babelrc 파일 생성 후 아래 내용 입력후 저장

({ "presets": ["es2015] })



(여기서 --save-dev는 글로벌이 아닌 해당 디렉토리-패키지 종속 에 설치되도록 하는 설정입니다. 따라서 여기 설치한 패키지들은 다른 프로젝트에 영향을 미치지 않습니다.)



[ESLINT 설치]

npm install -g eslint


eslint 를 사용하기 위해서는 .eslintrc 파일을 만들어야 합니다.


eslint --init 명령을 내리고 몇가지 질문에 답하면 기본 .eslintrc 파일이 만들어 집니다.


프로젝트 루트에서 eslint --init 명령을 실행하세요~


질문목록

a. How would you like to configure ESLint? Answer questions about your style

b. ECMAScript 6 기능을 사용하나요? yes

c. ES6 모듈을 사용하나요? yes

d. 어디에서 코드를 실행합니까? node

e. CommonJS를 사용합니까? no

f. JSX를 사용합니까? no (JSX: XML기반 자바스크립트 확장/리액트에서 사용)

g. 들여쓰기는 무엇으로 하겠습니까? 스페이스/탭 중 택일

h. 문자열에 어떤 따옴표를 사용? don't care

i. 줄끝 문자에 무서을 사용하나요? (유닉스/윈도우) 맥이나 리눅스인 경우 유닉스 선택하면 됨

j. 세미콜론이 필수이길 원하나요? yes

k. 설정파일 형식(Javascript, YAML, JSON)? Javascript



걸프에 ESLINT 를 통합하기 위해 아래 명령어로 추가 모듈을 설치합니다.

npm install --save-dev gulp-eslint



자! 이러면 기본 세팅은 끝났습니다.


+ Recent posts