Cesium打包命令总结

Cesium打包命令总结

引言

Cesium实验室QQ群里有人在问Cesium的打包问题。我想干脆总结一下Cesium的打包命令特点,写篇文章,顺带庆祝一下1024程序员节。。

Cesium的npm脚本有好多,其中几个和打包相关的命令我用红框圈了出来,以下来一一解释。



大部分的命令都是以gulp开头,可以看出Cesium是使用gulp进行打包的。在webpack早已成趋势的今天,Cesium的做法算是比较古老了。打包的细节可以在根目录下的gulpfile.js文件中查找到。以下npm命令的实现代码截图也都是出自gulpfile.js文件。

之前我经常把打包命令称为编译命令,结果被同学给怼了。。后来查了一下js方面的术语,虽然网上也有些文章称为编译,但是大多还是叫打包。可能是我之前C++用多了的后遗症吧。。很抱歉之前给各位同学造成了迷惑。。所以我也更正一下之前的称呼。。统一叫打包。。



打包命令详述

npm start

这个命令是启动Cesium自己写的一个http服务,虽然不是打包命令,但是比较典型,这里简单介绍一下。

执行这个命令以后,就可以启动服务了,端口号强制为8080。这个时候可以在浏览器中输入localhost:8080,效果如下:



注意点1: 如果这个端口号被占用,那么对不起,服务起不来。没有webpack那么机智,不会自动替换一个端口号。

所以有时候,如果真的不想停止现有的8080端口服务。可以手动换个端口号运行,执行下面的命令:

node server.js --port 8081

注意点2: 另外还有一个值得注意的问题,Cesium的npm start命令启动的服务, 只能在本机查看 ,如果想在局域网内其他机器上观看,是不行的。如何解决这个问题呢?可以运行以下命令来搞定:

npm run startPublic

注意,必须要加上 run ,否则还是跑不起来的。

npm run build

Cesium的npm run build命令,和其他一些开源库,真的是有点儿差别。大部分项目执行这个命令的意思,一般都是打包生成一个dist文件夹,并且把编译压缩优化(生产环境下)的js放进去。但是Cesium却是在Source目录下生成了一个Cesium.js文件,注意您没看错,是 Source 文件夹下。当然也偷偷做了点别的事情,暂且不表。。



重要的事情再说一遍:Source文件夹下的这个Cesium.js文件,默认情况下是没有的,并不是源码文件,是运行npm run build命令构建出来的js文件。

奇怪了,Cesium打包的结果,为什么要放在Source文件夹下?

其实这里的Cesium.js文件并不是真正意义上对外输出(生产环境下)的js文件,仅仅是把Cesium源码中一千两百多个js文件做了一下引用。。所以这个Cesium.js也就相当于一个索引。这样外界使用时,只要引用这么一个Cesium.js文件,就会通过AMD模式自动引入其他Cesium的源码js文件来使用。

这是Cesium打包时的一个比较特殊的地方,Cesium通过这种方式,就可以在网页中直接调试源码了。很遗憾,Cesium并没有使用目前比较流行的SourceMap的方式。

那么既然npm run build命令并不会进行打包,那么真正的打包命令是什么呢?这里就要说到npm run minifyRelease命令了。

npm run minifyRelease

这个命令会把Source目录下所有的js文件打包放到Build/Cesium/目录下,并且生成一个真正的供生产环境下来使用的Cesium.js文件。因为执行了各种编译压缩打包等操作,所以编译速度比较慢,在我的机器上,大概需要2分钟才能编译完。。



我们再来分析一下这个命令的操作,如下图所示:



outputDirectory选项中可以看到,Cesium把压缩优化后的Cesium.js文件放在了Build/Cesium/目录下。

optimizer选项则表示js代码如何压缩优化,Cesium使用的是uglify2。

removePragmas选项是用来删除源码中的调试信息的。我们查看Cesium源码时,有时会发现源码中有大量的includeStart开头的注释,如下图所示。这里面大多是调试信息,removePragmas设置为true,相当于来删除includeStartincludeEnd之间的js语句。



npm run minify

npm run minify命令的配置如下图所示,可以看到他会压缩优化js代码,但是不会去掉调试信息。



npm run combine

npm run combine命令则是既不压缩优化,也不去掉调试信息。相当于生成具备调试信息的js文件。



npm run combineRelease

npm run combineRelease命令相当于不进行压缩优化,但是去掉了调试信息。



npm run release

npm run release命令则相当于combine、minifyRelease、generateDocumentation三个命令的集合。他会同时做了三件事:
1. 在Build/CesiumUnminified目录下生成调试版的Cesium.js文件; 2. 在Build/Cesium目录下生成压缩优化好的(生产环境下)的Cesium.js文件; 3. 并且还生成了Cesium的api文档,文档放在Build/Documentation目录下。



打包遗留问题

看不到Development分组

很多同学会反馈Cesium的示例代码中有的时候看不到Development分组。



这主要是因为npm run buildnpm run release命令都会生成Apps/Sandcastle/gallery/gallery-index.js文件,这个文件是用来管理Cesium的示例目录的。然而后者生成的gallery-index.js文件会去掉develop分组。所以实际情况是,执行了npm run release命令以后,Development分组就会消失。如果希望再次看到,方法也很简单,就是再次执行一下npm run build命令即可。

编译包和源码包的区别

Cesium官方在github中会同时提供两个版本的zip包,头一个是Cesium事先打包编译好的,这个zip包里面会有Build目录。在自己的项目中直接拿来引用Build/Cesium/Cesium.js就好。但是您在这个zip包里面是看不到Cesium示例中的development分组的,而且也不能执行npm run build进行编译(部分编译文件被移除)。

如果希望看到development分组示例,或者修改Cesium源码的话,就只能用第二个zip包了。这个zip包里面只有源码,需要自行打包。



总结

  1. npm run build 只是生成了一个Source目录的Cesium.js文件,相当于一个索引;
  2. npm run minifyRelease 才是真正用来输出生产环境下的Cesium.js文件,输出目录在Build/Cesium/下;
  3. npm run release 同时输出调试版的Cesium.js、生产环境下的Cesium.js和api文档。

欢迎关注 Cesium实验室 ,QQ群号:595512567


qm.qq.com/cgi-bin/qm/qr? (二维码自动识别)

编辑于 2018-10-25

文章被以下专栏收录