브라우저를 위한 패키지 관리 도구 jspm 사용하기

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이 서버측, 클라이언트측 모두 사용할 수 있도록 나온다면 말 그대로 강력함을 뽐내지 않을까 상상해본다. 🙂

김용균

안녕하세요, 김용균입니다. 문제를 해결하기 위해 작고 단단한 코드를 작성하는 일을 합니다. 웹의 자유로운 접근성을 좋아합니다. 프로그래밍 언어, 소프트웨어 아키텍처, 커뮤니티에 관심이 많습니다.

이 글 공유하기

이 글이 유익했다면 주변에도 알려주세요!

페이스북으로 공유하기트위터로 공유하기링크드인으로 공유하기Email 보내기

주제별 목록

같은 주제의 다른 글을 읽어보고 싶다면 아래 링크를 확인하세요.

June 19, 2015

ino toolkit으로 Arduino 맛보기

지난번 구입한 Raspberry Pi에 이어 이번엔 Arduino가 도착했다. 첫인상으로 비교했을 땐 Raspberry Pi는 똑똑하고 Arduino는 우직한 기분이 든다. 🙂 Arduino는 모든 정보가 오픈소스로 공개되어 있어서 훨씬 다양한 종류…

June 07, 2015

ECMAScript 6를 위한 Babel 기본 사용법

ECMAScript 6 에서 추가되는 많은 새로운 기능들이 기대가 되면서도 아직까지 직접 사용해보지 못했었다. 최근에 JavaScript 관련 컨퍼런스 영상 뿐만 아니라 대부분의 포스트도 최신 문법으로 작성되는 경우가 많아 살펴보게 되었다. ES5 …