2016년 11월 15일 화요일

decaffeinate hack - Rx.js 를 import 해보자!

http://decaffeinate-project.org/repl
평소에 coffee를 좋아하지만 ecma6로 바꿔서 보여줘야 좋아하는 분들이 종종 있어서 decaffeinate를 쓰다보니 나름 console.log 만 띡 나오는게 꽤 쓰기 좋아서 자주 쓰는데.
쓰다보니 아쉬운 점이 외부 라이브러리를 불러올 수가 없어서 약간의 hack을 해보기로 했다.
script = document.createElement('script')
script.src = "//cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.2/Rx.js"
x=document.getElementsByTagName('script')[0]
x.parentNode.insertBefore script, x
단순하게 생각하면 이런 식
script tag을 하나 만들고 src를 Rx.js CDN 라이브러리로 지정하고 insertBefore를 사용해서 밀어넣으면 될거라고 생각했는데
repl.js?t=2015-03-09T08:30:22-07:00:7 Uncaught Error: module is not supported in the browser, you need a commonjs environment such as node.js/io.js, browserify/webpack etc
이런 오류가 난다. 보니까 의도적으로 decaffeinate에서 "module", "exports", "require" 이라는 말을 쓰면 저지하도록 되있더라
  ["module", "exports", "require"].forEach(function(commonVar){
    Object.defineProperty(window, commonVar, {
      get: function () {
        throw new Error(commonVar + " is not supported in the browser, you need a commonjs environment such as node.js/io.js, browserify/webpack etc");
      }
    });
  });
이 부분. Object.defineProperty 를 재정의 하기는 그렇고. (쓸데없는 짓들을 -_-++ )
그냥 Rx.js 를 고치기로 마음 먹음. RxJS 5.0.0 rc3 기준으로 github(https://github.com/acidsound/RxJS_pure)에 하나 땄다.
module 하고 exports 를 삭제하고 올린 뒤
script = document.createElement 'script'
script.src="//cdn.rawgit.com/acidsound/RxJS_pure/master/Rx.js"
scrSelf = document.getElementsByTagName('script')[0]
scrSelf.parentNode.insertBefore script, scrSelf
script.onload = -> startApp()
startApp = ->
  console.log "init program"
  Rx.Observable.range 1, 5
    .subscribe (o)->
      console.log o
잘 작동한다.
즐거운 Rx 라이프!