jspm, react, uglifyjs로 front end 환경 세팅하기

지난 10월 29일, SK 플래닛 Open 세미나 “@tech 판교”에서 SK 플래닛의 윤지수 마스터(전 Next WebFrontEnd 교수)에게 jspm의 사용을 추천 받았다. 진행하고 있는 개인 프로젝트에서 번들러로 Webpack을 쓸 생각이었는데 강력한 추천이었으므로 노선을 변경하여 적용 해보기로 했다.

일단 설치부터 하자.

1
2
3
4
5
$ mkdir ./jspm_test
$ cd ./jspm_test
$ npm init
$ npm install --save-dev jspm
$ jspm init

jspm에서 system.js 등이 기본으로 딸려오는데, init 시 transpiler는 사용/어떤 것을 선택하도록 되어 있다. react와 ES6를 쓰기 위해 babel을 선택한다. 이후 react와 react dom을 설치하고, 배포를 위해 uglifyjs도 설치한다.

1
2
3
$ jspm install react-dom
$ jspm install react
$ jspm install npm:uglify-js

jspm은 npm이나 github 등으로부터 패키지를 받아 설치하는 기능으로 제공한다. 한번에 관리하려면 이쪽이 편한 면이 있을 것이다.

1
2
$ mkdir ./src && mkdir ./dist
$ touch ./src/main.js

이후는 개발용 src 디렉터리에 적당한 이름의 시작점 js 파일을 생성하고, 적당히 개발을 시작한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
//main.js 예시
import React from 'react';
import ReactDOM from 'react-dom';

class HelloReact extends React.Component {
  render () {
    return (
      <h2>hello react</h2>
    )
  }
}

ReactDOM.render(<HelloReact />, document.querySelector('.example'));

개발 중에는 jspm_packages/npm/babel-core@*/browser.js를 script tag로 추가하고, main.js의 script type을 text/babel로 하여 자동으로 compile하게 한다.

여기에 이후 react-hot-loader를 추가하거나 할 수 있겠지만, 일단은 jspm + uglifyjs로 배포버전을 만들어보자.

다음을 적당한 스크립트로 만든다. shell이던 fabric이던 Makefile이던 뭐던….

1
2
3
4
-rm -r dist/
mkdir dist
jspm bundle-sfx src/main dist/app.js
./node_modules/.bin/uglifyjs dist/app.js -c -m -o dist/app.min.js

이후는 html의 script src를 dist/app.min.js로 바꾸고 type을 text/javascript로 하는 정도(없애거나..). thymeleaf 등으로 개발과 배포 환경을 분리해두었다면 편할 것이다.

uglifyjs의 각 옵션의 의미는 다음과 같다.

  1. -c : 압축한다. -c 뒤에 이런저런 옵션들을 추가할 수 있지만, 기본 설정으로 충분해보인다.(거의 모든 옵션이 기본에 포함된다.)
  2. -m : mangle, name을 가능한 짧은 것으로 바꾼다. 난독화에 해당하는데, -m -r ‘예외명1,예외명2’ 옵션으로 예외를 지정할 수 있다.
  3. -o : 파일로 출력한다.