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自动编译脚本已成功运行...');

总结

不了解，就觉得很难，其实当你勇敢地迈出第一步的时候，问题就已经解决。由于你以为本身行，你真的就行。