2015년 10월 7일 수요일

amok 에서 vim으로 coffeescript 를 사용하는 법

amok.js 는 아주 빠르고 멋진 코드 갱신을 할 수 있게 하는 작은 툴이다.
webpack의 Hot module replacement 와는 차원이 다른 반응속도를 보여준다.
물론, 구조도 더 단순하고 무엇보다 러닝커브가 낮다.

uglify 툴로 이전에 언급한 Tracker.js , mithril.min.js , MeteorDDP.js 를 모두 묶어서 util.js 라고 만들고


> uglify -s MeteorDDP.js,Tracker.js,mithril.min.js -o util.js

html 파일은 간단하게 만들자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mamok</title>
</head>
<body>
<script src="./util.js"></script>
<script src="./index.js"></script>
</body>
</html>

index.js 를 바라보게 했는데 사실은 index.coffee를 쓸거다.

'use strict'

window.addEventListener 'patch', ->
  m.redraw()

m.module document.body,
  view: -> [
    m 'h1', 'Hey, Brother.'
    m 'h3', m.trust '<button>hey hey</button>'
  ]

아주 짧지만 신통한 구조다. 파일 변경을 감지하면 amok은 patch라는 이벤트를 보내는데 이때마다 그저 m.redraw() 로 뷰를 갱신하는게 전부.
amok이 coffeescript를 지원하긴 하지만 여러개의 파일이나 js랑 섞어쓸때 전채를 다 로딩해버리는 만행을 저질러서 그냥 그때그때 coffee파일을 저장할 때마다 js로 컴파일 하는 방식을 택했다.
이것 역시 매우 빠르다.
내 경우는 https://github.com/kchmck/vim-coffee-script 을 사용하고 있는데
:CoffeeWatch 를 입력하면 바로 js 결과물이 보이고.

autocmd BufWritePost *.coffee silent make!
를 설정(https://github.com/kchmck/vim-coffee-script#recompile-on-write)해놓으면 저장할 때마다 *.coffee 파일인 것은 js make 할 수 있어서 매우 편리하다.
.vimrc 에 넣으면 더욱 편하지만 coffee를 js로 변환하지 말아야하는 경우도 많아서 그냥 일일이 치기로 했다.

마지막으로 amok을 실행하면 되는데 

amok -i --browser chrome -t file://$PWD/index.html

이렇게 해주면 크롬브라우저를 띄우고 -i 옵션인 터미널에서 인터렉티브모드와 -t 옵션인 Hot Patching 을 index.html 기준으로 실행한다.

만일, 매번 타이핑을 안하고 좀 더 이쁘게 하고 싶으면 package.json을 활용하자.
{
  "private": true,
  "scripts": {
    "start": "amok -i --browser chrome -t file://$PWD/index.html
  },
  "dependencies": {
    "amok": "file:../.."
  }
}

이와 같이 하고 npm start 로 
요렇게 된다.
patch 때 이벤트를 감시헀더니 util.js 파일은 로드하지 않고 index.js  만 갱신하는 걸 볼 수 있었다.
지화자!