引言

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，相當於來刪除includeStart和includeEnd之間的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 build和npm 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? (二維碼自動識別)

推薦閱讀：

查看原文 >>
相关文章