Cesium打包命令总结

Cesium的npm脚本有好多,本文对不同的打包命令进行解释和说明。

从github上下载cesium源码后,打开package.json文件,我们可以看到不同的打包命令:

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

一、命令详解

1、npm start

这个命令是Cesium自己写的一个http服务,不是打包命令,是启动web服务的命令,启动后可以访问cesium源码中Apps下的资源页面。

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

 

注意

(1)、 如果这个端口号被占用,服务是起不来。它没有webpack那么机智,不会自动替换一个端口号。

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

node server.js --port 8081

 

或者在server.cjs直接修改一个没被占用的端口号:

(2)、Cesium的npm start命令启动的服务, 只能在本机查看 ,如果想在局域网内其他机器上观看,需要运行以下命令:

npm run startPublic

 

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

2、npm run build

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

注意:

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 minify,npm run combine、npm run combineRelease、npm run release.

3、npm run minifyRelease

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

 分析一下这个命令的操作:

 

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

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

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

 4、npm run minify

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

5、npm run combine

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

 6、npm run combineRelease

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

7、npm run release

npm run release命令则相当于combine、minifyRelease、generateDocumentation三个命令的集合。他会同时做了三件事:

  1. 在Build/CesiumUnminified目录下生成调试版的Cesium.js文件;
  2. 在Build/Cesium目录下生成压缩优化好的(生产环境下)的Cesium.js文件;
  3. 并且还生成了Cesium的api文档,文档放在Build/Documentation目录下。

 

二、打包遗留问题

1、看不到Development分组

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

 

 

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

2、编译包和源码包的区别

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文档。

 

参考:https://www.bbsmax.com/A/MAzAmjlyz9/

 

posted @ 2023-04-21 18:00  孤草之魂  阅读(772)  评论(0编辑  收藏  举报