안녕하세요. 초보입니다.
오늘은 자바스크립트 환경설정을 위해 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
자! 이러면 기본 세팅은 끝났습니다.