最新版 Cesium（1.99.0）构建封装开发环境以及遇到问题_科技

使用版本

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. 过程博客

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

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

Using Dynamic import in Node.js lets us import ES6 modules in CommonJS code, and more - UPDATED，跟上边错误一致，也是 require 配置问题。

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

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

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

Can not import widgets.css file not exported from package.json #9212，同上。

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

Invalid options object. Dev Server has been initialized using an options object that d，有一定参考价值。

webpack ＜ 5 used to include polyfills for node.js core modules by default.，有一定参考价值。

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

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

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

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

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

Vue2+Cesium1.9+热力图开发笔记

官方示例介绍

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

官方示例配置介绍：

在这里插入图片描述

package.json 文件

在这里插入图片描述
2. webpack.config.js 配置文件

在这里插入图片描述

4. index.js 入口文件

在这里插入图片描述

官方示例配置补充：

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

webpack.config.js 配置文件

1. 代码混淆

//压缩混淆加密
const TerserWebpackPlugin = require("terser-webpack-plugin");optimization: {minimize: true,minimizer: [new TerserWebpackPlugin({minify: TerserWebpackPlugin.uglifyJsMinify,// `terserOptions` options will be passed to `uglify-js`// Link to options - https://github.com/mishoo/UglifyJS#minify-optionsterserOptions: {annotations: false,// ie:  false,},}),],
}

2. 开启 gzip 压缩

// 压缩代码
const CompressionPlugin = require("compression-webpack-plugin");plugins: [// 开启 GZIP 压缩new CompressionPlugin({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详解

webpack5 SplitChunksPlugin 实用指南

webpack5 SplitChunksPlugin 使用说明

TerserWebpackPlugin文档

CompressionWebpackPlugin文档

githup 完整项目

ES6 封装基础架构

参考博客均已在文中注明

上一篇：CANoe-vTESTstudio之Test Diagram编辑器（元素介绍）

下一篇：黑苹果之技嘉（GIGABYTE）主板BIOS设置篇

最新版 Cesium（1.99.0）构建封装开发环境以及遇到问题