TypeScript 自動編譯腳本的實現

引言

萬法歸一，TypeScript似有一統前臺的趨勢。

微信小程序也引入了TypeScript，咱們也要跟隨技術主流將小程序從JavaScript切換到TypeScript。

微信小程序如今沒以前那麼火爆了，但仍我咱們跨平臺開發的明智。其實無論微信有小程序，支付寶、百度、QQ瀏覽器都相繼上線小程序，還有手機聯盟(vivo、oppo、華爲等多家手機公司共同成立的)建立的快應用也狠狠地抄了騰訊一把，代碼簡直如出一轍。

小程序最火爆的時期要屬去年清明節，小遊戲橫空出世，同時帶火了小程序，周圍的朋友都在用小程序、小遊戲。

記得當時還利用幾天的假期時間，調用豆瓣開發的api，開發了一款名爲豆瓣電影的小程序。惋惜，最終沒能上架，拒絕緣由是該應用屬於信息服務類的程序，禁止我的開發者申請。

當時是使用ZanUI開發的，經歷了一個本身玩的小項目，也算對微信小程序有了一個全面的理解。

需求

使用TypeScript重搭一次微信小程序的架子，從此的小程序使用TypeScript開發。

實現

基礎工做

建項目和以前沒什麼區別，就是在語言一欄須要選擇TypeScript。

其實使用TypeScript和JavaScript對於微信開發者工具來講沒什麼區別，用TypeScript也是編譯成JavaScript再執行。

這裏不推薦直接使用微信開發者工具編寫TypeScript，由於沒有提示，我是採用WebStorm安裝微信插件進行開發，而後打開微信開發者工具查看效果的。

一帆風順，沒什麼問題。

在UI框架選型上，我選擇了ColorUI。

爲何選擇這個呢？雖然以前用過的ZanUI也很好用，也很全，但我第一眼看到ColorUI的時候，我被驚豔到了。

再點進去組件查看，我猜測這個做者必定有過不少次的手機端頁面開發經驗，真的是每個組件你都能用到，爲做者點個贊。

缺點就是文檔不完善，但我認爲這個Demo寫得足夠優秀了，直接clone下來，想要的都有了，剩下的就是改改字。但願之後當我有時間的時候，能給ColorUI的文檔提交一些Pull Request，也算是感謝做者寫出了這麼好的UI庫並分享給大衆。

很是好用，只須要去框架裏粘一粘代碼，漂亮的原型就出來了，挺好用的。

自動編譯

寫的時候遇到了點問題，就是編譯的問題。

微信開發者工具執行的是js文件，我編寫的是ts文件，假設我修改了ts文件，我想看到修改後的效果，我須要手動編譯，這就不優雅了。

咱們用過的grunt、ng，哪一個不是自動編譯、自動刷新？既然小程序沒提供，那隻能另謀生路了。

忽然想起ng不也是nodejs裏的命令嗎？它能監聽文件自動編譯，我爲何不試試看呢？

node

node.js不是一個框架，而是一個高效的JavaScript運行環境。

因此，node.js腳本說到底就是一個js文件，沒什麼難的。

在微服務中，咱們經常使用node.js搭建反向代理服務器，其性能與nginx部分伯仲。

自動化腳本

新建腳本yunzhi.js，代碼很簡單，相信有編程基礎的人都能看懂，這裏就再也不贅述。

const exec = require('child_process').exec;
const watch = require('node-watch');

watch(['app.ts', 'specs', 'pages'], { recursive: true }, function(evt, name) {
    if (name.split('.').pop() === 'ts') {
        console.log('監聽到TypeScript文件改動，從新編譯中...');
        exec('npm run compile');
    }
});

console.log('雲智TypeScript自動編譯腳本已成功運行...');

總結

不瞭解，就覺得很難，其實當你勇敢地邁出第一步的時候，問題就已經解決。由於你以爲本身行，你真的就行。