故人來邀課,做個技術新知的分享吧!
該講什麼呢?想了想,覺得就以 ES2015 新版的 JavaScript 為主題吧!
ES2015 它令 JavaScript 又再跨入了一個新紀元。它令 JavaScript 的程式碼,變得更好用、更優雅;程式碼的組織更結構化、模組化。
Microsoft 正在推廣,所謂符合「企業級應用」的 TypeScript ,本身就是 ES2015 的超集合。
而 Google 正在發展,已進入 Beta 測試的 AngularJS 2.0 ,也是採用 TypeScript 。
所以,學好 ES2015 等於在為未來打基礎! ^^y
一旦,決定了想講的主題後,開始規劃授課劇本,及配合講解使用的程式碼。
結果......
寫著、寫著......
因為要讓寫好的程式碼,有個平台可以執行,我選擇了 Web 瀏覽器。
但因目前的 Web 瀏覽器,不講 ES2015 語言,得用 ES5 語言。所以,我需要利用一套名為 Babel 的 Transpiler 編譯器,來翻譯 ES2015 程式碼。
因為 ES2015 的「import」指令,新版的 JavsScript 也有了「模組」管理的議題。所以,使用 Babel 來編譯 ES2015 程式碼,還有些「眉角」的處理,如此, Web 瀏覽器才能「正確」執行,已是 ES5 的 JavaScript 程式。
既然要在 Web 瀏覽器,展示 ES2015 程式碼輸出的結果,沒有好看的畫面,實在說不過去,應該來點 CSS 將門面化妝一下,於是又需要引入 Sass 工具。
以上這些事情,若是「純手工打造」,不斷在「終端機」輸入指令,肯定是會累死人。所以,只好把 Auto-build 的好工具 Gulp 搬出來。然後又再為 Gulp 弄一堆為自動化而生的指令稿。
唉!又是為了喝一杯牛奶,結果搞出一個牧場的悲劇。
本只是單純的 ES2015 知識分享,結局又是橫生枝節,又弄出一堆事來。(所以,我一直很害怕別人對說:「其實我的需求,超簡單滴說.....」U_U )
好了,既然木已成舟,搞成這般田地,心想:「不然就這原來是演講用的東東,改成是一個 ES2015 的軟體專案模版吧?」
將東西放上了 GitHub ,也寫上了 README 後,還是擔心有些事情-「筆墨難以形容」。
所以,這個影片就這樣誕生了...... ^^!!
講好的 ES2015 軟體專案模版在那肋?
底家...... https://github.com/AlanJui/ES2015 (opens new window)
想學 ES2015 應從何處下手? 工商服務,推薦 CodeSchool 的課程: