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  만 갱신하는 걸 볼 수 있었다.

지화자!