如何导入Cesium源码使用及解决导入报错问题

核心原因 #

Cesium的Source目录下是未构建的ES模块源码，直接导入会触发两个报错：

1. 浏览器默认将脚本当作非模块解析，无法识别import语句，因此出现Cannot use import statement outside a module
2. 源码未全局导出Cesium变量，直接引用会提示Cesium is not defined

具体解决步骤 #

1. 将脚本标签改为模块模式 #

把导入Cesium的<script>标签添加type="module"属性，让浏览器以ES模块规则解析代码：

<script type="module">
  import * as Cesium from './Source/Cesium.js';
  // 示例：初始化Cesium地球
  const viewer = new Cesium.Viewer('cesiumContainer');
</script>

2. 配置资源路径与样式 #

直接使用源码需要手动指定静态资源路径，并引入UI组件样式：

• 在模块代码中配置资源根路径：

  import * as Cesium from './Source/Cesium.js';
  // 可选：使用Cesium Ion资源需配置令牌
  Cesium.Ion.defaultAccessToken = '你的Ion令牌';
  // 指定Assets、Widgets等资源的根目录
  Cesium.CesiumWidget.baseUrl = './Source/';
  

• 引入Widget样式表（使用Viewer等带UI的组件时必须添加）：

  <link rel="stylesheet" href="./Source/Widgets/widgets.css">
  

3. 可选：本地构建源码（更稳定） #

如果直接引用源码遇到依赖或环境问题，可以本地构建适配后的版本：

• 在Cesium根目录执行npm install安装依赖
• 执行npm run build:dev生成开发版构建文件（保留源码映射，方便调试）
• 导入构建后的ES模块：

  import * as Cesium from './Build/Cesium/Cesium.js';
  

注意事项 #

• 仅支持ES模块的现代浏览器可直接使用源码，IE浏览器不兼容
• 直接用源码时，WebAssembly、Worker等特殊模块需手动配置，构建版本会自动处理这些细节
• 调试源码时，可在浏览器开发者工具的「源代码」面板中，直接定位到Source目录下的文件设置断点

内容的提问来源于stack exchange，提问作者mrbean455