Cesium搭建源码调试环境的流程

1.前言

最近在对Cesium源码进行学习,因为打算用的是谷歌浏览器的开发者工具进行源码的调试,在网上查了折腾半天才弄起来,所以记录一下。方便有这方面需求的同行们更好的去学习Cesium源码(毕竟Cesium这种基于状态的逐帧进行调度的模式的架构,直接VSCode跑起来看源码还是很抽象的),所以这里记录了直接傻瓜式一步到位搭建起源代码调试环境。(如果不想听废话直接拉到最后看省流版)

2.搭建步骤

2.1准备Cesium源码

这里没什么好介绍的,直接去github上去clone一个就行。这里给去链接直接传送github.com/CesiumGS/ce...

2.2依赖Cesium依赖

要想启动Cesium呢,必须得安装所需要的依赖,这里借助node直接通过npm的方式安装依赖。

js 复制代码
npm install

2.3打包

按理来说经过npm install安装完依赖之后,是可以直接启动Cesium源码了,但是通过npm run start把代码跑起来,进入到提供的helloWorld页面时候却启动不起来。

根据报错内容发现找不到Cesium对象?页面中明明通过script标签引入了Cesium。然后查看文件夹目录发现Build文件夹下没有CesiumUnminified/Cesium.js这个文件,所以找不到。既然没有为啥官方还是这么引用?这里不兜圈子,没有的话就给它直接弄一个出来,这里就需要将这个build文件弄出来,,因为Cesium主要是用gulp进行打包的,所以我们也跟着它的脚步这么干,所以紧着这执行这个命令行,全局安装是上gulp

js 复制代码
npm install gulp -g

当安装完之后,在对应的源码文件夹中打开CMD,输入以下命令,等待安装完毕即可。

js 复制代码
gulp build

在打包完之后,可以看到Build文件夹下出现了我们需要的Cesium.js文件!大功告成。

最后通过npm run start启动项目,就可以在谷歌浏览器的开发中工具中打断点调试源码了。当然这里还会报错,因为没有Token,怎么获取这个token网上资料很多我就多叙述了。

省流版

js 复制代码
//github拉源码
1.拉源码
//源码文件夹下
2.npm install

3.npm install gulp -g

4.gulp buiild

5.npm run start

大功告成!
相关推荐
牧羊狼的狼19 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手20 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲20 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell21 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮1 天前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel1 天前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip1 天前
JavaScript事件流
前端·javascript
赵得C1 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 天前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 天前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js