Cesium打包命令總結
引言
Cesium實驗室QQ群裡有人在問Cesium的打包問題。我想幹脆總結一下Cesium的打包命令特點，寫篇文章，順帶慶祝一下1024程式設計師節。。
Cesium的npm指令碼有好多，其中幾個和打包相關的命令我用紅框圈了出來，以下來一一解釋。
輸入圖片說明
大部分的命令都是以gulp開頭，可以看出Cesium是使用gulp進行打包的。在webpack早已成趨勢的今天，Cesium的做法算是比較古老了。打包的細節可以在根目錄下的gulpfile.js檔案中查詢到。以下npm命令的實現程式碼截圖也都是出自gulpfile.js檔案。
之前我經常把打包命令稱為編譯命令，結果被同學給懟了。。後來查了一下js方面的術語，雖然網上也有些文章稱為編譯，但是大多還是叫打包。可能是我之前C++用多了的後遺症吧。。很抱歉之前給各位同學造成了迷惑。。所以我也更正一下之前的稱呼。。統一叫打包。。
image.png
打包命令詳述
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三個命令的集合。他會同時做了三件事：
- 在Build/CesiumUnminified目錄下生成除錯版的Cesium.js檔案；
- 在Build/Cesium目錄下生成壓縮優化好的(生產環境下）的Cesium.js檔案；
- 並且還生成了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包裡面只有原始碼，需要自行打包。
輸入圖片說明
總結
- npm run build 只是生成了一個Source目錄的Cesium.js檔案，相當於一個索引；
- npm run minifyRelease 才是真正用來輸出生產環境下的Cesium.js檔案，輸出目錄在Build/Cesium/下；
- npm run release 同時輸出除錯版的Cesium.js、生產環境下的Cesium.js和api文件。
歡迎關注 Cesium實驗室 ，QQ群號：595512567。
image.png