W ostatnim poście przedstawiłem czym jest i jakie zalety ma język typescript. Mam też nadzieję, że udało mi się zainteresować was tym językiem. Wiem, że samego typescriptu nie pokazałem jeszcze nic, ale możecie być spokojni, będzie.
Dziś jednak zajmę się czymś innym. Rozpoczęcie pracy z TSem, może i nie jest specjalnie trudne, ale jest parę rzeczy, które warto przygotować zawczasu. Oszczędzi to kłopotów w przyszłości. Dziś pokażę jak przygotować środowisko pracy do pierwszego projektu TypeScritptowego.
Tworzenie i testowanie programów w TypeScripcie nie jest tak szybkim procesem jak w przypadku JSa. Między napisaniem programu a uruchomieniem go, będzie trzeba przejść kompilację i sprawdzenia kodu. Chcę aby proces ten był wydajny i jak najlepiej zuatomatyzowany. Na szczęście większość z potrzebnych narzędzi już w miarę dobrze znam 🙂 Wypiszę tu te, których będę używał do tworzenia aplikacji TypeScriptowych.
Edytor tekstu Atom
Wspominanie o edytorze tekstu może być małym zaskoczeniem, ale nie robię tego przypadkiem. Domyślnym edytorem dla TSa, jest microsoftowe IDE – Visual Studio. Tworzenie gotowych projektów jest w nim dużo prostsze. Większość procesu dzieje się poza wzrokiem programisty (dla ludzi, którzy nie lubią babrać się z procesami budowania projektów, to może być plus, ale spokojnie, mój edytor też będzie robił sporo za nas). W moim przypadku użycie tego IDE nie wchodzi w grę, bo pracuję na Linuxie 🙂 . Do tego Visual Studio to naprawdę potężna aplikacja, używanie jej tylko do pisania przykładowych aplikacji webowych, może być przesadą 🙂 .
Proponowanym przeze mnie narzędziem jest Atom. Używam go na co dzień i pracuje mi się z nim naprawdę przyjemnie. Jedyny mankament to to, że czasem zdarza mu się długo uruchamiać. Jednak najbardziej atrakcyjną cechą tego edytora jest to, że można bez problemu dodawać do niego moduły, a tych jest naprawdę sporo. Dla nasz ważny będzie moduł o nazwie atom-typescript. Dodaje do edytora funkcjonalność wspomagającą pracę z typescriptem. A tych jest naprawdę sporo, od sprawdzania składni kodu, autouzupełnianie, rozpoznawanie typów i kolorowanie składni 🙂 . Ten dodatek jest naprawdę potężny.
Aby zainstalować paczkę wystarczy w menu na pasku aplikacji wybrać Edit -> preferences. Powinno pokazać się coś takiego:
Packages to zakładka z zainstalowanymi paczuszkami. Aby dodać nową należy wybrać zakładkę install. To ta ostatnia z plusikiem. Wpisujemy w wyszukiwarkę atom-typescript i dajemy install. Przy okazji jak już będziecie na tym ekranie polecam wejść w zakładkę themes i ściągnąć wygląd o nazwie seti-ui.
Kompilacja
Kolejnym krokiem, jest ustawienie procesu kompilacji z TypeScriptu na rozumiany przez przeglądarki JavaScript. Jeżeli spodziewaliście się w tym miejscu gulpowych tasków zawierających skomplikowane strumienie przekazujące dane, to niestety muszę was zawieść 🙂 . Atom, zajmie się kompilacją za nas. Aby jednak było to możliwe, trzeba najpierw w folderze projektowym stworzyć specjalny plik konfiguracyjny: tsconfig.json. Jako jego zawartość wpisujemy następującą treść:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": false, "noImplicitAny": false, "removeComments": true, "noLib": false }, "compileOnSave": true, "buildOnSave": true } |
tsconfig.json może mieć znacznie więcej opcji, ale te wystarczą na początek. Pierwszy obiekt to ustawienia kompilacji. Chcę aby mój TS kompilował się do EcmaScript5. A system modułów tłumaczony był na system commonjs (ten sam, który mamy w node).
Dwa następne pola, związane są z automatyczną kompilacją. Dzięki temu, że są ustawione na true, za każdym razem gdy zapiszemy plik *.ts, w tym samym folderze powstanie wersja *.js . I tu przechodzę do jednego mankamentu z którym jeszcze się nie do końca uporałem. Kiedy w projekcie pojawi się sporo plików TSa, każda kompilacja spowoduje, że pojawi się tyle samo plików skompilowanych. Wynik – dużo plików, połowa zbędna. I tak przechodzę do ostatniego punktu.
gulp i odpowiednie moduły
Z pomocą przychodzi gulp… jako tako. Moje rozwiązanie jest trochę prowizoryczne, ale nic lepszego nie udało mi się wykombinować. Na potrzeby pierwszego projektu TypeScriptowego musi wystarczyć. Celem moich zadań gulpowych będzie zebranie wszystkich wynikowych plików JavaScriptowych (które będą modułami commonJS) i ‚zbundlowanie’ ich do jednego pliku wynikowego, który będzie rozumiany przez przeglądarkę. Następnie gulp powinien automatycznie usuwać zbędne pliki JS a w projekcie zostawić tylko kod TypeScripta. No i wszystko to ma wykonywać się z automatu, kiedy tylko zostaną wykryte nowe zmiany
Udało mi się to osiągnąć połowicznie. Zaraz wytłumaczę w czym problem, ale najpierw kod mojego gulpfile:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
var gulp = require('gulp'); var source = require('vinyl-source-stream'); var browserify = require('browserify'); var clean = require('gulp-clean'); var watch = require('gulp-watch'); var webserver = require('gulp-webserver'); gulp.task('browserify', function() { watch('source/**/*.js', function(){ var bundleStream = browserify('source/main.js').bundle() return bundleStream .pipe(source('main.js')) .pipe(gulp.dest('app')) }) }) gulp.task('clean',function () { return gulp.src('source/**/*.js', {read: false}) .pipe(clean()); }); gulp.task('webserver', ['browserify'], function() { gulp.src('./app') .pipe(webserver({ livereload: true, open: true })); }); gulp.task('serve', ['webserver']); |
Potrzebne moduły (trzeba je doinstalować poprzez npm), nie licząc głównego modułu gulpa, to: vinyl-source-stream, browserify, gulp-clean, gulp-watch i gulp-webserver. Dwa pierwsze działają razem i służą do ‚bundlowania’ wynikowych plików JS. clean służy do usuwania plików. watch i webserver używałem już wcześniej. Pierwszy pozwala na automatyczne uruchamianie taska po zmianie w pliku a drugi obsługuje prosty serwer.
Pierwszy task browserify, działa dokładnie tak jak oryginalne narzędzie do bundlowania modułów commonJS. Przekazuje mu lokację pliku, który jest wejściem do aplikacji oraz folder, w którym ma wypluć wynik swojej pracy. Po drodze muszę przepuścić potok przez moduł vinyl-source-stream, inaczej wynikły by jakieś konflikty. Zawartość tego taska jest otoczona watch-em. Oznacza to, że będzie on uruchamiany za każdym razem, gdy któryś ze wskazanych przez watch plików się zmieni. Póki co wszystko idzie zgodnie z planem.
Drugi task to clean, służy on do usuwania plików JS z mojego folderu źródłowego. I tu niestety zaczęły się schody, za nic nie mogłem sparować go z browserify. Ostatecznie stanęło na dość topornym rozwiązaniu. clean uruchamiam ręcznie na koniec pracy, przed commitem do gita. Wiem, to jest lipa, ale nie chciałem kombinować na siłę. Gdy lepiej poznam ekosystem dookoła TypeScriptu, na pewno wynajdę lepszy sposób i dam znać. Póki co muszę żyć z tym co mam 🙂 . Celem tego projektu jest nauka TypeScriptu a nie stworzenie idealnego build systemu 🙂
Kolejny task webserver, to już standardowe rozwiązanie. Uruchamia on serwer biorąc indeks.html ze wskazanej lokacji i odpala go w przeglądarce. Do tego przy każdej zmianie w projekcie, strona będzie się odświeżać.
Ostatni task uruchamia serwer i startuje browserify. To od niego będę zaczynał pracę.
I środowisko gotowe 🙂 . Czyli można już zabierać się do pracy w TypeScript.
Ale póki co, to wszystko na dziś 🙂 . I tak post ten wyszedł znacznie dłuższy niż planowałem :). Na koniec, jak zawsze, zachęcam do polubienia mojej strony na facebooku. Zawsze na bieżąco zamieszczam tam informacje o nowościach, więc warto polubić aby nie przegapić żadnego nowego wpisu.
One thought on “TypeScript – pierwsze kroki. Przygotowanie środowiska pracy.”