amok.js 는 아주 빠르고 멋진 코드 갱신을 할 수 있게 하는 작은 툴이다.
webpack의 Hot module replacement 와는 차원이 다른 반응속도를 보여준다.
물론, 구조도 더 단순하고 무엇보다 러닝커브가 낮다.
uglify 툴로 이전에 언급한 Tracker.js , mithril.min.js , MeteorDDP.js 를 모두 묶어서 util.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 만 갱신하는 걸 볼 수 있었다.
지화자!
댓글
댓글 쓰기