Cesium系列(5)--源码编译和调试(ES6)

Cesium源码编译和调试(ES6)

作为目前来说支持大场景，海量模型数据，LOD分级渲染的三维免费开源项目 Cesium 应该是最优选择了。保持每个月更新一次的维护效率，加上各种社区的支持， Cesium 在未来很长一段时间内都会是最优的开源选择。

对于好的开源项目，大家都是会想了解它的原理是什么，它的代码是什么样的。哪些地方值我们学习。今天就详细介绍一下怎么编译和调试源码。

包的分类

预编译包 也就是我们在官网上看的js包下载地址

这里面提供了打包之后的js库和示例以及文档。在这里面调试，打包会编译失败。
源码包 源码包打包之后是可以得到预编译包。如果想修改源码，就使用这个包。获取方式有两种。
- git 安装
  git clone https://github.com/CesiumGS/cesium.git
- zip包下载下载地址

编译运行

下载解压源码包之后，找到根目录(package.json同级)，然后安装模块

npm install 
// 国内较慢的道友们， 用cnpm 也可以
cnpm install

编译命令

    
npm run release // [最完整的打包]
// 打包到Build 目录下，包括上线的运行版本，调试版本 和API文档
 
npm run makeZipFile // [生成分发zip包]
// 打包到根目录下的 Cesium-<版本号>.zip ,删除不必要的开发文件

//打包到Build目录下的Cesium目录
npm run minifyRelease //[线上运行打包]
npm run minify [线上运行留Debug信息打包]

// 打包到Build目录下的CesiumUnminified目录
npm run combine //[不压缩并留Debug信息打包]
npm run combineRelease // [不压缩且不保留Debug信息打包]

// 运行本地帮助文档，示例代码服务
npm start  <--port 可选端口>

// 运行局域网内帮助文档，示例代码服务
npm startPublic

本地运行
在运行之前，需要先运行一下 npm run minify 或者上面的几个打包命令（都是比较慢3分钟左右）。因为源码包里面最初是没有 Build 目录的，运行这个目录是先生成一个 Build 目录。便于后续的本地启动。
然后运行 npm run start , 默认地址为http://localhost:8080/

点击 Sandcastle 就能看到内置的Demo了

调试运行
源码的文件都是在 Source 目录下的，所以我们在调试的时候，当然是引用 Source 目录下的文件来实时运行调试了。因为 ES6 很流行了，所以调试的方式基于 ES6 import 导入

准备
首先在源码的根目录下建立一个文件夹 Demo ，然后里面建立两个文件 demo.html 和 demo.js

编写
demo.html的内容如下

/*
 * @Author: Jercky 
 * @Date: 2020-12-10 11:44:14 
 * @Last Modified by:   Jercky 
 * @Last Modified time: 2020-12-10 11:44:14 
 */
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>源码调试</title>
  <!-- <link rel="stylesheet" href="../Source/Widgets/widgets.css"> -->
  <style>
    @import url(../Source/Widgets/widgets.css);
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>

<div id="cesiumContainer"></div>
</body>
<script>
  window.CESIUM_BASE_URL = '../Source'
</script>
<script type="module" src="demo.js" ></script>
</html>

demo.js的内容如下

/*
 * @Author: Jercky 
 * @Date: 2020-12-10 11:44:14 
 * @Last Modified by: Jercky
 * @Last Modified time: 2020-12-10 11:45:09
 */
import * as Cesium from '../../Source/Cesium.js'
const viewer = new Cesium.Viewer('cesiumContainer')

运行
我用的是 VsCode 调试工具，有个插件 Live Server 很好用。用插件打开 demo.html 即可在浏览器查看了
修改源码实时运行
这里面只是做一个简单的演示。在 Source/Scene/View.js 中增加打印输出。console.log('new Cesium View -------------Jercky')

运行结果：

打包使用
当自己的源码修改完成之后，运行 npm run makeZipFile 就能生成和官网一样的预编译包了。这里就不再演示了。