使用create-react-app脚手架引入mar3d及mars3d-cesium配置步骤(一些坑)

最新推荐文章于 2024-10-10 16:24:51 发布

RaySaber

最新推荐文章于 2024-10-10 16:24:51 发布

阅读量759

点赞数 1

分类专栏： JS 文章标签： react.js 3d javascript webpack 前端

本文链接：https://blog.csdn.net/caigouyimei/article/details/127898627

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

具体步骤如下

1.先使用`npx create-react-app xxx(你的项目名)`搭建脚手架

2.使用`npm run eject`将webpack.config.js配置构建文件暴露出来

在这里插入图片描述

3.使用`npm install mars3d`安装mars3d，

安装完之后会在node_modules文件夹下同时出现mars3d和mars3d-cesium两个包，但会发现mars3d-cesium包比cesium包中少了一个Source文件夹，这也是按照mars3d官网配置一直不成功的主要原因！！！

具体做法是可以先安装cesium包`npm install cesium`，然后将cesium包中的Source文件夹拷贝到mars3d-cesium包中和Build的同级目录下，结果如下图：

在这里插入图片描述

4.安装node-polyfill-webpack-plugin和copy-webpack-plugin,注意copy-webpack-plugin要和webpack版本要对应。我的版本如下

在这里插入图片描述

5.在webpack.config.js文件中添加如下代码

//以下为配置修改的部分
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
// Cesium源码所在目录
const cesiumSource = 'node_modules/mars3d-cesium/Source'
const dirCesiumSource = '../node_modules/mard3d-cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

在entry和output后添加如下代码

//添加
amd: {
  toUrlUndefined: true,
},

在这里插入图片描述
在module中添加如下代码

//添加
//解决：Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
unknownContextCritical: false,

在这里插入图片描述
在plugin中添加如下代码

//以下为修改（添加）的部分
new CopyWebpackPlugin({
  patterns: [
    { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
    { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
    { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' },
    { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
  ]
}),
//修改如下：
new webpack.DefinePlugin({
  CESIUM_BASE_URL: JSON.stringify("")
}),
new NodePolyfillPlugin(),