最新版 Cesium1.99.0 构建封装开发环境以和遇到问题-觅稀奇MeXiQi.COM

2023年4月19日更新—搞了一个Cesium镜像，欢迎使用：沙盒示例和API

最近项目用Cesium比较多，因此想把常用的功能进行封装，为了方便，打算基于ES6架构做封装。

项目开始阶段，想基于之前项目（Cesium1.84）搞得一个ES6环境（Webpack4.×），结果启动一直有问题。经过不断尝试，发现Cesium1.84之前版本没问题，相同的配置，升级Cesium1.84之后版本就会报错。

尝试改错无果，最后决定升级Webpack5。开始在Webpack4.×基础上做升级，结果也是出现各种问题。

不建议直接由Webpack4升级为Webpack5。

最后偶然在搜索到Cesium官方有Webpack5示例，于是克隆下来，参照的改，终于完成基础架构。

本文主要介绍Webpack4.×集成Cesium错误、官方示例介绍、官网示例补充、Webpack5学习、完整项目。

使用版本

node：v16.16.0

npm：8.17.0

webpack：5.74.0

webpack-dev-server:4.11.1

Cesium：1.99.0

Webpack4.*集成Cesium错误

1.过程错误

经过不断的试错，发现Cesium1.84.0之前的版本，Webpack4.×环境基本都是正常的，启动服务和编译都没问题。

但是Cesium1.85.0至Cesium1.95.0，webpack4.×环境下报错如下：

升级至Cesium1.96.0及以上的版本，webpack4.×环境下报错如下：

2.过程博客

试错过程中，遇到的错误以及搜索的解决办法（多数不奏效）：

nodejsrequire/import导包报错以及解决方法，Cesium1.84之前版本应该是需要require相关配置，最新版因采用ES6架构，不需要额外配置require。

UsingDynamicimportinNode.jsletsusimportES6modulesinCommonJScode,andmore-UPDATED，跟上边错误一致，也是require配置问题。

errorin./src/assets/images/logo.png报错，图片静态资源问题。

cesium报错errorin./node_modules/cesium/Source/ThirdParty/zip.js的解决办法，这个是Webpack4不识别ES6某些操作符的问题。

为何在打包工具中导入Cesium的css失败了？（新版已修复），Cesium1.84-1.95间某个版本问题，后期版本已修复。

Cannotimportwidgets.cssfilenotexportedfrompackage.json#9212，同上。

webpack4升级到webpack5经验总结，有一定参考价值。

Invalidoptionsobject.DevServerhasbeeninitializedusinganoptionsobjectthatd，有一定参考价值。

webpack＜5usedtoincludepolyfillsfornode.jscoremodulesbydefault.，有一定参考价值。

除了遇到的问题，还有一些已经过期的博客（低于Cesium1.84）：

笔者也被这些博客耽误一些时间，至于旧版本能不能配置成功，未尝试！

Cesium深入浅出之webpack搭建框架（讲解详细，有示例，版本cesium1.77）

Cesium官方教程13–Cesium和Webpack（教程还不错，只是webpack4.*，仅适用于版本低于cesium1.84.0）

另外，还有一个vue版本，由于笔者封装不需要vue环境，因此未深入研究：

Vue2Cesium1.9热力图开发笔记

官方示例介绍

Cesium提供的Webpack官方示例，可以直接运行，也没什么问题，可以根据自己的需求调整即可。

官方示例配置介绍：

package.json文件

2.webpack.config.js配置文件

4.index.js入口文件

官方示例配置补充：

官方示例中缺少代码混淆和gzip压缩，这里补充一下：

webpack.config.js配置文件

1.代码混淆

//压缩混淆加密constTerserWebpackPlugin=require("terser-webpack-plugin");optimization:{minimize:true,minimizer:[newTerserWebpackPlugin({minify:TerserWebpackPlugin.uglifyJsMinify,//`terserOptions`optionswillbepassedto`uglify-js`//Linktooptions-https://github.com/mishoo/UglifyJS#minify-optionsterserOptions:{annotations:false,//ie:false,},}),],}

2.开启gzip压缩

//压缩代码constCompressionPlugin=require("compression-webpack-plugin");plugins:[//开启GZIP压缩newCompressionPlugin({filename:'[path][base].gz',algorithm:'gzip',threshold:10240,//大于10kb的才被压缩//minRatio:0.8,//压缩比例//test:/\.js$|\.css$|\.html$/,test:/\.js$|\.css$/,//不压缩cesium资源exclude:/\/sphere/,}),]

webpack5过程学习资料

试错太久，这里记录一下webpack5不错的学习资料。

webpack5介绍

html-webpack-plugin文档

html-webpack-plugin详解

webpack5SplitChunksPlugin实用指南

webpack5SplitChunksPlugin使用说明

TerserWebpackPlugin文档

CompressionWebpackPlugin文档

githup完整项目

ES6封装基础架构

参考博客均已在文中注明