react+CesiumJS

Cesium配置修改

本文只是在使用过程遇到的一些问题，方便以后在使用。
参考博客地址

配置的版本

1、安装第三方库：

npm install cesium
npm install copy-webpack-plugin

2、配置webpack文件：cesium在使用时，需要配置webpack文件
文件路径：node_module/react-scripts/webpack.config.js

（1）找到webpack.config.js，在最上方引入插件，并配置相关路径

// cesium
const CopyWebpackPlugin = require('copy-webpack-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = 'src';

（2）在return中的output对象中加入sourcePrefix: ‘’，让webpack字符串缩进正确

sourcePrefix: '',

（3）在output底下添加amd对象：

    amd: {
      // Enable webpack-friendly use of require in Cesium
      toUrlUndefined: true,
    },

（4）在resolve的alias中加入如下内容：

   cesium: path.resolve(cesiumSource),

（5）在plugins中加入打包时的配置，这里的plugins不是resolve中的，而是底下的一个单独plugins，Data项是用来存放本地数据的，当需要读取本地文件时（图片、模型）需要在src文件夹下新建data文件夹存放数据

new CopyWebpackPlugin([
  { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
]),
new CopyWebpackPlugin([
  { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
]),
new CopyWebpackPlugin([
  { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
]),
new CopyWebpackPlugin([
  { from: path.join(fileFolder, 'data'), to: 'Data'}
]),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin({
  // env.stringified,
  CESIUM_BASE_URL: JSON.stringify(''),
}),

（6）修改App,js

import React, { Component } from 'react';
import * as widget from "cesium/Widgets/widgets.css";
import * as Cesium from 'cesium/Cesium'

 
class App extends Component {
  componentDidMount() {
		const viewer = new Cesium.Viewer("cesiumContainer");
	}
  render() {
    return (
      <div id="cesiumContainer" />
    );
  }
}
 
export default App;

最终结果