Címkék » coffee


CoffeeScript Source Map with Redux

2013. február 13. javascript development coffee komment hozzászólás

Nagy hiányossága a CoffeeScript-nek, hogy nehezen debuggolható. Ezen segíthetünk némileg Source Map használatával. Ehhez segítségünkre van a Coffee Script Redux projekt, melyet Kickstarker-en sikeresen szedett össze közel 14e dollárt az indulásához. Jelenleg 2.0-beta2 verziónál tart, kis lemaradásban a kiírt ütemtervvel. Telepítése egyszerű.

$ git clone git: //github.com/michaelficarra/CoffeeScriptRedux.git
$ cd CoffeeScriptRedux
$ make deps
$ make test

vagy ha hibát dobna deps vagy test generálás, használd a következőt:

$ make install

Fájlok fordítása JS-re

Redux fordító eltérő szintaktikával bír, mint az eredeti CS. Az előző mappából futtathatjuk az alábi kódot. Amely létrehozza /path/to/test.js fájlt.

$ ./bin/coffee --js --input /path/to/test.coffee > /path/to/test.js

Source Map generálása

$ ./bin/coffee --source-map --input /path/to/test.coffee > /path/to/test.js.map

Használatához két dologra van szükség. Az source-map modulra, amit npm-el telepíthetünk.

$ npm install source-map

A böngészőnek jelezni kell, hogy van elérhető forrás kép az adott kódsorhoz. Ez legegyszerűbben úgy kivitelezhető, hogy az generált JavaScript fájlok utolsó sorába beillesztünk egy ilyen kódot:

//@sourceMappingURL=test.js.map

Jelenleg csak Chrome böngésző támogatja ezt, alapból kikapcsolt funkció. Engedélyezéséhez nyisd meg a console-t, jobb alsó sarokban fogaskerékre katt, majd "Enable Source Maps" checkbox pipa.

source-map.png

Pro

  • Az eredmény kipróbálható a "Source" fül alatt.
  • Beállíthatunk törés pontokat maguknak a .coffee fájloknak.
  • Megkönnyíti a hiba helyének azonosítását, ezzel gyorsítva a fejlesztést.

Kontra

  • Build folyamatot Developer és Staging/Public folyamatokra kell bontani, hasznavehetetlen a Source Map egy spagetti kódban.
  • Nem futtatható console-on Coffee kód. Segítségünkre lehet a CoffeeConsole extension. Rossz hír, hogy forkolni kell, mert az eredeti fordítóval operál.

Példa alkalmazás innen tölthető le.

FYI: Ez a bejegyzés jóformán egy fordítás, de elengedhetetlen előzménye saját build folyamatomatom bemutatásának, melyet hamarosan publikálok. Eredeti cikk itt olvasható, angol nyelven. 

süti beállítások módosítása