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 = 'node-watch');

watch(['app.ts','specs',0);">'pages'],{ recursive: true },function(evt,name) {
    if (name.split('.').pop() === 'ts') {
        console.log('监听到TypeScript文件改动,重新编译中...');
        exec('npm run compile');
    }
});

'云智TypeScript自动编译脚本已成功运行...');

总结

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

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序