TypeScript 自动编译脚本的实现

28次阅读

共计 1580 个字符,预计需要花费 4 分钟才能阅读完成。

引言
万法归一,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 自动编译脚本已成功运行 …’);

总结
不了解,就以为很难,其实当你勇敢地迈出第一步的时候,问题就已经解决。因为你觉得自己行,你真的就行。

正文完
 0