React+Cesium搭建网页并使用tomcat发布

        之前在做开发的时候，需要用React框架搭建网页，并且加载cesium模型，由于本人开发纯小白上手，通过网上一些资料加上自己的摸索，终于搞定了。在这里分享一下我的学习过程，希望能对大家有所帮助。本文是纯手打原创文章，发现任何错误请留言，我会作出修改。

        本文部分内容参考了https://www.jianshu.com/p/c980045cc4c4和https://blog.csdn.net/shine_scp/article/details/83311375，如果给两位博主造成麻烦，请联系我删除文章。

不说废话了，下面开始介绍流程：

React项目初始化

React是目前非常火热的前端开发框架，它独特的思想受到广大前端开发者的喜爱，这里用create-react-app来初始化react项目：

1、安装nodejs，网上有很多教程，这里不再赘述；

2、安装create-react-app：在命令提示行中输入 npm install –g create-react-app，全局安装，出现图1结果即为安装成功；

npm install -g create-react-app

                                                                                      图1 安装create-react-app

3、初始化react项目：输入create-react-app react-cesium，react-cesium是项目名称，可以自己随便起，稍等一会儿，出现图2结果，就完成了整个react项目初始化，其文件目录结构为图3所示；

create-react-app react-cesium

                                                                                              图2 初始化项目

                                                     

                                                                                       图3 目录结构

4、输入cd react-cesium进入项目文件夹下，然后再输入npm start启动项目，打开浏览器输入localhost:3000，出现图4界面，即完成初始化。

cd react-cesium
npm start

                                                                                                  图4  react界面

Cesium配置修改

新建react项目之后，现在开始将cesium库加入到react中：

1、安装第三方库：命令提示行中输入 npm install cesium安装cesium，再安装copy-webpack-plugin；

npm install cesium
npm install copy-webpack-plugin

2、修改配置文件：由于create-react-app是基于webpack的项目，在生成时会自动隐藏webpack配置项，所以需要将webpack配置文件暴露出来，这里一般的做法是在命令提示行输入：npm run eject，而由于npm run eject过程基本不可逆，所以若出现错误会很麻烦，所以建议直接先行修改git配置再执行eject：首先输入git add . ，然后git commit –m “init”，再执行npm run eject，出现图5提示时，输入y，显示图6结果，即为成功，此时目录结构改变（图7），多出config与scripts两个文件夹，config文件夹使我们重点关注的；

git add .
git commit –m “init”
npm run eject

图5 eject提示

图6 eject成功提示

图7 文件目录改变

3、先npm install 重新安装所有第三方库，再npm start检查项目是否正常运行，否则重新尝试；

4、配置webpack文件：cesium在使用时，需要配置webpack文件，具体官网有，但是有时webpack.config.js与许多教程不一样，只有这一个，而不是分为了两个（webpack.config.dev.js与webpack.config.prod.js）。这里给出修改方法：

（1）、找到webpack.config.js，在最上方引入插件，并配置相关路径（图8），如果你的文件夹结构和我是一样的，那么路径也直接用我的就行，不一样的话需要自己调整下；

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

图8 引入插件配置路径

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

sourcePrefix: '',

图9 修改output

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

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

图10 amd

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

alias: {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
   cesium: path.resolve(cesiumSource),
},

图11 修改alias

（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(''),
}),

图12 修改plugins

 

图13 添加内容

4、可视化cesium：在src/index.js中引入，将App.js中内容替换成，执行npm start：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'cesium/Widgets/widgets.css'

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import Cesium from "cesium/Cesium";

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

export default App;

图14 app.js修改

图15 最终结果

Tomcat发布

完成配置之后，就是发布。Tomcat最近常用的工具，直接去官网下载安装包，坐这里是tomcat7，解压后即可，然后在项目文件夹中运行命令提示行，输入npm run build，最终会生成一个build文件夹，将其复制到tomcat的webapps下，并替换ROOT，即可完成发布。如有需要作其他修改，可自行查阅资料，网上很多。

注：服务器部署时，可以下个安装版直接运行安装比较方便，但是最好不要装C盘。