基于Next.js14+TS+Cesium搭建开发环境

本文链接：https://blog.csdn.net/Liyong_liyong/article/details/137893331

本文介绍了如何在next.js项目中使用pnpm替代npm管理依赖，并详细说明了如何配置webpack以包含Cesium库及其资源，以及如何编写和启动一个使用Cesium的React组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目

npx create-next-app@latest

在这里插入图片描述

pnpm的使用

next.js项目默认使用npm管理项目依赖，想要使用pnpm则需要删除默认的node_modules和package-lock.json两个文件

在这里插入图片描述

使用pnpm重新下载依赖

安装项目所需依赖

pnpm install cesium
pnpm install copy-webpack-plugin
pnpm install process

配置`next.config.mjs`文件

import process from "process";
import CopyWebpackPlugin from "copy-webpack-plugin";
import path from "path";

const pathBuilder = (subpath) => path.join(process.cwd(), subpath);

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/Workers"),
            to: "../public/cesium/Workers",
            info: { minimized: true }
          }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/ThirdParty"),
            to: "../public/cesium/ThirdParty",
            info: { minimized: true }
          }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/Assets"),
            to: "../public/cesium/Assets",
            info: { minimized: true }
          }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/Widgets"),
            to: "../public/cesium/Widgets",
            info: { minimized: true }
          }
        ]
      }),
      new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify("/cesium") })
    );

    return config;
  },
  output: "standalone"
};
export default nextConfig;

编写组件

'use client';
import {ReactElement, useEffect} from 'react';
import * as Cesium from 'cesium';
import 'cesium/Source/Widgets/widgets.css';
import { TOKEN } from "@/utils";

Cesium.Ion.defaultAccessToken = TOKEN.CESIUM;

const CreateViewer = (): ReactElement => {
  useEffect(() => {
    initMapViewer()
  }, [])
  const initMapViewer =  () => {
    new Cesium.Viewer('cesium-viewer')
  }
  return <div id={'cesium-viewer'} style={{width: '100%', height: '100%'}}/>;
}
export default CreateViewer;