[react] react 学习(一) | 创建react+ts+cesium项目 配置webpack

前言

准备最近抽空学习一下react框架，作为一名gisr 职业发展也不能仅局限gis，能够结合gis+web前端比单一研究gis带来的收益更高。

为什么选择react而不是vue呢(忽略angular..)？并不是vue不够优秀，而是公司需要和大型项目的适应，同样也是大厂的首选项。

准备先按官方的资料和github撸一个demo，后面再学学 TypeScript + React Hook开发栈。

步骤

环境说明 ：操作系统: win10  , nodeJs：15.2.0 , npm：7.0.8  , ide:vscode

创建项目

1. 在github拉取快速创建 react + ts 项目的开源插件

插件地址:  https://github.com/jpavon/react-scripts-ts

执行 npm i 

注意这里需要node-sass 会被墙 需要指向淘宝镜像

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass

2 完成安装依赖源 , 创建新项目

 执行命令

npx create-react-app map3d --scripts-version=@jpavon/react-scripts-ts
cd map3d/
yarn start

启动成功 ：

由于使用了CRA 脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度 

 这里完成了项目的创建，但是集成Cesium需要配置webpack

3.  释放webpack等配置文件

由于create-react-app是基于webpack的项目，生成时自动隐藏webpack配置项，需要把webpack配置文件暴露出来，需要执行npm run eject将config等配置文件出来(注意操作不可逆)

npm run eject

操作完成！

4. 修改webpack.config.js文件

配置路径和参数

/** 配置Cesium静态资源访问 */
const CopyWebpackPlugin = require('copy-webpack-plugin');
/** cesium访问路径标识 导入模块默认寻找Source下面 */
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = 'src';

添加amd

添加字符缩减

/解决报错  解决Critical dependency: require function is used in a way in which dependencies cannot be statically extracted的问题

添加定义的cesium模块

拷贝静态资源

完成配置！

其实这里也可以通过cdn的方式加载cesium，通过window.Cesium设置一下Cesium.buildModuleUrl.setBaseUrl("/Cesium/")路径就行。

开发一个三维组件

1.  在src/index文件中引入样式文件

2. 编写一个路由App

3 自定义路由组件

4. 开发一个组件页面 map3d

/** 组件样式文件 */
import map3DStyle from './index.module.less';
/** 从react中获取React对象 和 Components组件 */
import React, { Component } from 'react';
/** 导入cesium模块 */
import * as Cesium from 'cesium/Cesium'

/** 使用react的Component组件对象自定义map3d组件 */
export default class Map3D extends Component {

  /** 数据初始化 */
  constructor(props) {
    super(props)
    this.state = {}
  }

  /** dom完成第一次渲染执行函数 */
  componentDidMount() {

    this.initMap()
  }

  /** 初始化地图 */
  initMap() {
    // 将viewer对象放在window环境下
    window.viewer  = new Cesium.Viewer('cesiumContainer')
  
  }

  /** 逻辑渲染 */
  render() {
    
    // 构建虚拟dom
    return (
      <div className={ map3DStyle.viewer } >
        <div id="cesiumContainer" className={ map3DStyle.cesiumContainer } ></div>
      </div>
    )
  }
}

5. 这里用到less，也需要在webpack.config.js中配置

安装依赖

npm i less --save
npm i less-load --save

添加正则判断

修改getStyleLoaders函数

添加less解析

在map3d中引入less文件

import map3DStyle from './index.module.less';

这里css-module需要将less文件命名后缀为 .module.less才能编译

完成组件开发！

执行命令

yarn start

启动成功！

demo地址:https://github.com/zhangti0708/map3d