较新版本Cesium使用本地源码编译打包

0 写作背景

较新版本的Cesium(1.100版本及以后)在代码结构上做了一定的调整,打包方式也随之发生了一些变化。

Starting with version 1.100, CesiumJS will be published alongside two smaller packages @cesium/engine and @cesium/widgets

老版本修改了本地源码,执行 gulp build 即可编译出新的版本库;较新版本默认用 node_modules中从 npm 下载来的Cesium代码打包,因此对本地源码(packages/engine、packages/widgets)做的改动不会出现在打包结果中。

打开 Source/Cesium.js 文件,可以看到引用的是 node_modules 下文件的路径。在打包过程中,会根据这里的路径把所有代码合并到一个大文件中(Build/CesiumUnminified/index.js、Build/CesiumUnminified/Cesium.js 等)

javascript 复制代码
export const VERSION = '1.119';
export { AutomaticUniforms } from '@cesium/engine';
export { Buffer } from '@cesium/engine';
export { BufferUsage } from '@cesium/engine';
export { ClearCommand } from '@cesium/engine';
export { ComputeCommand } from '@cesium/engine';
export { ComputeEngine } from '@cesium/engine';
export { Context } from '@cesium/engine';
export { ContextLimits } from '@cesium/engine';
export { createUniform } from '@cesium/engine';
...

打包使用的索引文件 Source/Cesium.js

1 解决方案

1.1) 按如下代码片段修改 scripts/build.js 的 generateDeclaration 函数

javascript 复制代码
function generateDeclaration(workspace, file) {
  let assignmentName = path.basename(file, path.extname(file));
  let moduleId = file;
  moduleId = filePathToModuleId(moduleId);

  if (moduleId.indexOf("Source/Shaders") > -1) {
    assignmentName = `_shaders${assignmentName}`;
  }
  assignmentName = assignmentName.replace(/(\.|-)/g, "_");
  // return `export { ${assignmentName} } from '@${scope}/${workspace}';`;
  // 用本地源码的路径
  return `export { default as ${assignmentName} } from '../${file}';`;
}

重新执行 gulp build 后,Source/Cesium.js 文件中引用的路径会变成本地路径:

javascript 复制代码
export const VERSION = '1.119';
export { default as AutomaticUniforms } from '../packages/engine/Source/Renderer/AutomaticUniforms.js';
export { default as Buffer } from '../packages/engine/Source/Renderer/Buffer.js';
export { default as BufferUsage } from '../packages/engine/Source/Renderer/BufferUsage.js';
export { default as ClearCommand } from '../packages/engine/Source/Renderer/ClearCommand.js';
export { default as ColorTable } from '../packages/engine/Source/Renderer/ColorTable.js';
export { default as ComputeCommand } from '../packages/engine/Source/Renderer/ComputeCommand.js';
export { default as ComputeEngine } from '../packages/engine/Source/Renderer/ComputeEngine.js';
export { default as Context } from '../packages/engine/Source/Renderer/Context.js';
export { default as ContextLimits } from '../packages/engine/Source/Renderer/ContextLimits.js';
export { default as createUniform } from '../packages/engine/Source/Renderer/createUniform.js';
export { default as createUniformArray } from '../packages/engine/Source/Renderer/createUniformArray.js';
export { default as CubeMap } from '../packages/engine/Source/Renderer/CubeMap.js';
...

修改后的索引文件 Source/Cesium.js

1.2)改完这些还不算,本地源码 packages/widgets/Source 里也有一些地方引用了@cesium/engine。例如下面的形式:

javascript 复制代码
import {
  Clock,
  defined,
  destroyObject,
  EventHelper,
  JulianDate,
} from "@cesium/engine";
import knockout from "./ThirdParty/knockout.js";

本地源码也引用了node_modules下的源码

我们可以很容易在IDE中通过正则表达式替换掉对 @cesium/engine 的引用

根目录下(./packages/widgets/Source/*.js)的替换为 ../../engine/index.js

二级目录下(./packages/widgets/Source/*/*.js)的替换为 ../../../engine/index.js

至此,打包使用的就完全是本地源码了!

2 gulp build 命令解读

打包命令 gulp build 干了什么?gulp build 对应下面的 build 函数

javascript 复制代码
export async function build() {
  // ...
  await buildEngine(buildOptions);
  await buildWidgets(buildOptions);
  await buildCesium(buildOptions);
}

2.1)buildEngine:

  • glsl 文件编译成 js 文件;
  • 把 engine 下所有js文件的导出列表写到 packages/engine/index.js 中
  • 把 engine/Source 文件夹下所有 web worker 文件组织到 packages/engine/Build/Workers 文件夹下
  • 自动化测试文件相关(此处不详细说明)
javascript 复制代码
globalThis.CESIUM_VERSION = "1.119";
export { default as AutomaticUniforms } from './Source/Renderer/AutomaticUniforms.js';
export { default as Buffer } from './Source/Renderer/Buffer.js';
export { default as BufferUsage } from './Source/Renderer/BufferUsage.js';
export { default as ClearCommand } from './Source/Renderer/ClearCommand.js';
export { default as ComputeCommand } from './Source/Renderer/ComputeCommand.js';
export { default as ComputeEngine } from './Source/Renderer/ComputeEngine.js';
export { default as Context } from './Source/Renderer/Context.js';
export { default as ContextLimits } from './Source/Renderer/ContextLimits.js';
...

packages/engine/index.js

2.2)buildWidgets:

  • 把 packages/widgets 下所有 js 文件的导出列表写到 packages/widgets/index.js 中
  • 自动化测试文件相关(此处不详细说明)
javascript 复制代码
globalThis.CESIUM_VERSION = "1.119";
export { default as ClockViewModel } from './Source/ClockViewModel.js';
export { default as Command } from './Source/Command.js';
export { default as createCommand } from './Source/createCommand.js';
export { default as InspectorShared } from './Source/InspectorShared.js';
export { default as subscribeAndEvaluate } from './Source/subscribeAndEvaluate.js';
export { default as SvgPathBindingHandler } from './Source/SvgPathBindingHandler.js';
export { default as ToggleButtonViewModel } from './Source/ToggleButtonViewModel.js';
export { default as Animation } from './Source/Animation/Animation.js';
export { default as AnimationViewModel } from './Source/Animation/AnimationViewModel.js';
...

packages/widgets/index.js

2.3)buildCesium:

  • 在根目录下生成文件清单 Source/Cesium.js,根据该文件合并所有源码到一个大文件
  • 合并CSS文件
  • 组织并生成最终的web worker文件
  • 拷贝图片等静态资源到版本库所在的 Build 文件夹下
  • 自动化测试文件相关(此处不详细说明)
相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴4 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript