TS+Cesium配置

记录一下 TS + Cesium 配置过程

首先 npm 安装 cesium 和 webpack 一众包，如下：

{
  // package.json   
  "dependencies": {
    "@babel/preset-env": "^7.20.2",
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "babel-loader": "^9.1.2",
    "cesium": "^1.101.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

tsconfig

{
    "compilerOptions": {
      "module": "es2015",
      "target": "es2015",
      "strict": true,   // 严格模式
      "noEmitOnError": true,  // 错误禁止打包
      "moduleResolution": "node"  // 配置了才能找node_modules
    }
}

webpack.config.js

webpack 配置文件根据自己的需求添加loader即可，但 copy-webpack-plugin 非常重要，因为 cesium 库的结构有点怪，直接引入有点问题

注意，因为我的 node_modules 在根目录外层，并非根目录，所以在 path.resolve 中添加了 "../"，常规来讲不需要这个，若出现了 unable to locate 'XXX' glob 这个错误，大概率就是 from 里的目录错了

const path = require("path")
const webpack = require("webpack")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 重新编译自动清空build文件夹
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

const cesiumSource = "./node_modules/cesium/Build/Cesium"
const cesiumWorkers = "Workers"

module.exports = {
    entry: "./index.ts",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        environment:{
            // 是否允许webpack使用箭头函数(为了兼容IE)
            arrowFunction: true,
        }
    },
    module:{
        rules:[
            {
                test:/\.ts$/,
                use: [
                    {
                        // 当配置项复杂时可用{}
                        // 指定加载器
                        loader:"babel-loader",
                        // 设置预定义的环境
                        options:{
                            // 设置预定义的环境
                            presets:[
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":"88",
                                            "ie":"11"
                                        },
                                        // 指定corejs版本
                                        "corejs":"3",
                                        // 使用corejs的方式为"usage",表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    "ts-loader"
                ],
                // 排除node-modules中的ts
                exclude:/node-modules/
            },
            {
                test: /\.js$/,
                use: {
                    loader: '@open-wc/webpack-import-meta-loader',
                },
            },
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns:[
                {
                    from: path.resolve("../", cesiumSource, cesiumWorkers),
                    to: "Workers"
                },
                {
                    from: path.resolve("../", cesiumSource, "Assets"),
                    to: "Assets"
                },
                {
                    from: path.resolve("../", cesiumSource, "Widgets"),
                    to: "Widgets"
                },
                {
                    from: path.resolve("../", cesiumSource, "ThirdParty/Workers"),
                    to: "ThirdParty/Workers",
                }
            ]
        }),
        new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify("./"),
        })
    ],
    // 用来设置引用模块
    resolve:{
        // ts,js文件都可以设置为引用模块
        extensions:[".ts", ".js"],
    },

}

接下来还可能有个错误，Module not found: Error: Can't resolve 'zlib' in 'XXX' 

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

　　　　　　- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib'

If you don't want to include a polyfill, you can use an empty module like this:

　　　　　　resolve.fallback: { "zlib": false }

错误大概是上述的样子，报错原因是由于在 webpack5 中移除了 nodejs 核心模块的 polyfill 自动引入，所以需要手动引入：

所以只需，安装：

npm install node-polyfill-webpack-plugin -d

配置：

...
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
...

module.exports = {
    ...
    plugins:[
        ...
        // 引入 polyfill
        new NodePolyfillPlugin()    
        ...
    ],
    ...
}

此时 index.ts 中引入 cesium 就不会报错了

import * as Cesium from "cesium"
import "cesium/Build/Cesium/Widgets/widgets.css"

// 初始化地球
let viewer = new Cesium.Viewer('MapContainer', {
    ...
});
(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";