1. 程式人生 > >Cesium打包命令總結

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,相當於來刪除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

  image.png