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

桃扇骨 2022-12-22 04:38 667阅读 0赞

## 前言 ##

准备最近抽空学习一下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][https_github.com_jpavon_react-scripts-ts]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

执行 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

启动成功 ：

![20201117162504971.png][]

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

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

3.  释放webpack等配置文件

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

npm run eject

操作完成！

4. 修改webpack.config.js文件

配置路径和参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1][]

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

添加amd

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 2][]

添加字符缩减

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 4][]

添加定义的cesium模块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 5][]

拷贝静态资源

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 6][]

完成配置！

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

### 开发一个三维组件 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 7][]

2. 编写一个路由App

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 8][]

3 自定义路由组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 9][]

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

添加正则判断

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 10][]

修改getStyleLoaders函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 11][]

添加less解析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 12][]

在map3d中引入less文件

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 13][]

完成组件开发！

执行命令

yarn start

启动成功！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 15][]

demo地址:[https://github.com/zhangti0708/map3d][https_github.com_zhangti0708_map3d]

[https_github.com_jpavon_react-scripts-ts]: https://github.com/jpavon/react-scripts-ts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20221120/0b87a06fa06e40088b298da0c5cd1c41.png
[20201117162504971.png]: /images/20221120/97d8e9347b0d4fb5aeadc407698aba43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1]: /images/20221120/6119a529ab094f53be75547ef4124295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 2]: /images/20221120/c69691f63ca64acbbfc66c3160cef962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 3]: /images/20221120/be06ed39f59941a3954fe959fa7cc8de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 4]: /images/20221120/17da4d91ba2c477d9913c81f827137ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 5]: /images/20221120/e9db6d8c24494808b7d64c6a6e9583e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 6]: /images/20221120/c819a80113524211b93d9699ac2bbfe1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 7]: /images/20221120/01315d44d7f74aa8833b1fa2dc7f3671.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 8]: /images/20221120/47d12c9da488413cb5e66bdb6d6c99d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 9]: /images/20221120/6dbe6e34f4344f6db7baceabb9cd8bd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 10]: /images/20221120/0e0918e2852e4c3fa4be7c3e5dd47a12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 11]: /images/20221120/daeda2a449b94c35805a37a064764f9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 12]: /images/20221120/0e17ec050ebc47698e03131a8c2521cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 13]: /images/20221120/124a60819d204a42a133d58aaa9aea14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 14]: /images/20221120/3295f72680224ab7b9b547b873f64791.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 15]: /images/20221120/945ffd40f885409db1d5655ec627b28b.png
[https_github.com_zhangti0708_map3d]: https://github.com/zhangti0708/map3d