Client-side에서 패키지 관리를 위해서 bower를 자주 사용하는 편인데 bower는 module loader가 아니라 정말 말 그대로 패키지만 받아서 bower_components 에 넣어주는 정도의 역할만 하기 때문에 부수적인 작업이 많이 필요한 편이다. jspm은 module loader인 SystemJS를 기반으로 모듈을 불러온다. Traceur이나 Babel도 쉽게 적용할 수 있어 ES6 기준으로 개발하는데 편리하다.
jspm-cli를 먼저 설치한다.
$ npm install --global jspm/jspm-cli
프로젝트 폴더에서 jspm init로 프로젝트를 초기화 한다. 초기화 과정에서 프롬프트로 기본적인 사항들을 입력 받는데 ES6를 위해 어떤 transpiler를 사용할지 정할 수 있다. 여기서 설정한 모든 내용은 package.json에 저장되며 SystemJS를 위한 config.js 파일도 자동으로 생성된다.
$ jspm init
jspm으로 npm과 github에 있는 라이브러리를 쉽게 설치할 수 있다. (jspm install registry:package@version) 또한 alias로 등록되어 있는 라이브러리는 registry를 입력하지 않고도 설치할 수 있다. 그 목록은 registry 리포지터리에서 확인할 수 있다.
$ jspm install github:github/fetch
$ jspm install fetch
위에는 github의 fetch 구현을 사용했지만 whatwg-fetch를 사용할 수도 있다. 패키지를 사용할 때 패키지명을 다음과 같이 맵핑해서 사용할 수 있다. 다시 말하면 fetch에 맵핑하면 import "whatwg-fetch" 대신 import "fetch"로 불러오는 것이 가능하다.
$ jspm install fetch=npm:whatwg-fetch
다음 코드대로 index.html을 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app/main'); // 진입점이 되는 js 경로
</script>
</head>
<body></body>
</html>
app/main.js를 작성한다. github에서 haruair의 리포지터리 갯수를 구해 console.log로 출력한다.
import 'fetch'
fetch('https://api.github.com/users/haruair/repos')
.then(response => response.json())
.then(repos => console.log(repos.length))
이제 결과를 확인해보자. php -S localhost:8000 또는 python -m SimpleHTTPServer 8000으로 간단하게 서버를 띄워 console을 확인한다.
jspm의 장점은 js 뿐만 아니라 css와 같은 파일도 import 할 수 있어 컴포넌트 형태로 개발하기 쉽다. Webpack에서도 각 확장별로 loader를 지정해주면 알아서 처리해주지만 jspm은 설정 파일을 조작할 필요 없이 단순히 jspm의 systemjs/plugin-css만 설치하면 되는 편리함이 있다.
$ jspm install css
app/style.css를 간단하게 추가해서 확인해보자.
body {
background: #0dd0dd;
}
방금 작성한 css 파일을 js에서 import 하는 것이 가능하다. 다음 코드를 app/main.js에 추가하면 페이지에서 css를 불러오는 것을 확인할 수 있다.
import './style.css!'
css 외에도 less도 가능하다. sass는 아직 systemJS을 지원하는 플러그인이 없는 것으로 보인다.
패키지 묶기 (bundle)
jspm은 bundle도 지원한다. 간단하게 jspm bundle 명령어로 묶을 수 있고 app/main과 같이 진입점을 사용하고 있는 경우 jspm bundle-sfx app/main -o <outfile> 식으로 묶을 수 있다.
Jack Franklin의 London React Meetup, ES6 Modules & React with SystemJS에서는 uglifyjs와 html-dist 패키지를 함께 활용해 다음과 같은 Makefile을 만들어 make build로 묶을 수 있도록 만들었다.
먼저 uglifyjs와 html-dist를 npm으로 설치해야 한다.
$ npm install --save-dev uglifyjs html-dist
다음 내용으로 Makefile을 만든다. 2행 이후의 내용은 모두 스페이스가 아닌 탭으로 시작해야 한다.
build:
-rm -r dist/
mkdir dist
jspm bundle-sfx app/main -o dist/app.js
./node_modules/.bin/uglifyjs dist/app.js -o dist/app.min.js
./node_modules/.bin/html-dist index.html --remove-all --minify --insert app.min.js -o dist/index.html
이제 make build로 dist 폴더 내에 minify된 index.html과 번들된 app.js, app.map, 그리고 uglifyjs로 변환된 app.min.js를 확인할 수 있다.
jspm의 아쉬운 점은 아직 브라우저에서만 명확하게 동작한다는 점이다. registry에 등록되지 않은 패키지도 npm이나 github에서 직접 받을 수 있도록 지원하고 있지만 브라우저에서 제대로 지원하지 않는 라이브러리의 경우 사용할 수 없다. 또한 isomorphic한 방식으로 접근할 때 nodejs가 jspm으로 설치한 라이브러리를 불러오지 못하기 때문에 pre-rendering을 하려 한다면 중복되는 패키지를 다시 받아야 하는 불편함이 있다. 하지만 jspm은 무엇보다 설정을 배우는 것에 시간을 많이 쓰지 않고서도 ES6를 바로 사용할 수 있다는 장점이 있다. 또한 cli도 상당히 단순해서 다른 도구과 달리 바로 써먹을 수 있는 즐거움이 있다. 이 jspm이 서버측, 클라이언트측 모두 사용할 수 있도록 나온다면 말 그대로 강력함을 뽐내지 않을까 상상해본다. 🙂