0%

Javascript개발환경세팅

Posted on Edited on In

ES6 개발시 프로젝트 환경구축에 대한 정리

개발 디렉토리 생성

1
2
$ mkdir project
$ cd project

npm 패키지 관리

1
2
// 프로젝트 root디렉토리에서..
$ npm init

package.json 파일을 통해 의존성을 관리한다.
로컬 패키지 설치시 –save 또는 –save-dev 플래그를 사용하여 package.json 파일에 등록하게끔한다.

gulp 빌드도구

1
2
3
4
5
// 전역으로 설치(최초 1회만..)
$ npm install -g gulp

// 프로젝트 root디렉토리에서
$ npm install --save-dev gulp

babel 트랜스컴파일러

1
2
$ npm install --save-dev babel-preset-es2015
$ vi .babelrc

바벨은 ES6,리액트,ES7 등 여러가지를 지원하는 범용 트랜스컴파일러로,
프로젝트에서 바벨을 사용할 때 ES6을 사용한다고 지정해야한다.
.babelrc

1
{ "presets":["es2015"]}

gulp with babel

1
2
$ npm install --save-dev gulp-babel
$ vi gulpfile.js

gulpfile.js

1
2
3
4
5
6
7
8
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function() {
  gulp.src("src/*.js")
      .pipe(babel())
      .pipe(gulp.dest("dist"));
})

gulp 명령 실행

1
$ gulp

프로젝트 구조

기대되는 루트디렉토리의 모습

1
2
3
4
5
6
7
8
package.json  // npm
node_modules

gulpfile.js   // gulp
.babelrc      // babel

src           // es6 개발소스
dist          // es5 변환소스(배포 대상)