使用增量编译加快typescript项目编译

前段时间开始试着用typescript,感觉有一个很明显的问题是,习惯了脚本语言之后,我不太有耐性等待一两秒的编译。最近折腾了各种方法,一开始我想禁用掉typescript的类型检查来提升编译速度(反正编辑器里就会进行检查),结果发现tsc并没有这个编译选项,倒是ts-node有一个-T选项可以做到这点。其实一个更好的解决方案可能是使用增量编译。

tsc本身就能实现增量编译的效果,运行

1
tsc --watch src/*.ts --outDir dist --sourceMap

就能启动一个服务,在检测到文件修改的时候,进行增量编译。一般来讲,增量编译会比重新编译整个项目快得多。这个方法在用typescript写后端的时候应该够用了。

但是这个方法不太适合写前端。如果再用browserify这样的bundle工具进行打包的话,得到的source map对应的是tsc编译之后的结果,不便于前端的调试。事实上,browserify提供了一个叫做watchify的插件,watchify的用法跟browserify基本一样,区别在于,watchify必须用-o指定输出文件,比如:

1
watchify -t tsify --debug -v -o bundle.js src/index.ts

UPD:
写之前的内容的时候,电脑是长期接着电的,刚刚发现不接电的话watchify会比tsc --watch慢。折腾了一晚上又发现了一个方法。有一个browserify的transform叫做sourceify,简单地理解的话,它可以递归地读取source map,然后inline到bundle里面,这样就可以先用tsc --watch编译,然后browserify打包了。但是有于sourceify的一些feature,debug的时候要在web服务器上把/source映射到根目录。

另外还有几个细节:一是tsc编译jsx还是会很慢UPD:不会,另外直接tsc -w就可以了。

UPD:
不知道为什么,把一条import语句去掉的时候编译可能会比较久。