关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录

时间:2021-07-27 09:13:08
由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况。
我们看一下目前几个主流H5引擎的做法。

白鹭的做法

当前版本的做法

在tsconfig.json中,使用的是outDir而不是outFile,这么设置ts只会讲单个的ts文件直接编译成对应的js文件,ts编译器完全不去管js文件的加载顺序。
白鹭自己的编译器,会自己去解析ts文件,从而确定js文件的顺序,用于加载和合并js文件,唯一的缺点是这种方法会导致编译耗时较长。

新版本的做法

新版本还没有出,只能通过官方的文章来了解一下:
大概的意思是采用ES2015+webpack的方式来实现多个TS或JS文件按照正确的顺序合并成1个js文件。

Laya的做法

1.x

2.0之前的Laya,我只用过一小段时间,没有细看具体实现,感觉和白鹭当前版本的做法应该是差不多的。

2.x

使用CommonJS的方式来开发,加入了browserify和tsify的支持来实现CommonJS的写法可以在浏览器中的执行,通过这两个库实现多个TS文件按照正确的顺序合并成1个js文件。

Cocos Creator

这款引擎我了解得比较少,大概看了下,采用的是CommonJS,合并成一个js文件使用的技术并不是很清楚。