使用 Webpack 快速创建 React 项目 - SuperMap iClient JavaScript / Leaflet

SuperMap iClient JavaScript 是基于现代 Web 技术栈全新构建的统一 JavaScript 客户端，适用于 SuperMap 云 GIS 和在线 GIS 平台系列产品。接下来，让我们一起看看如何使用 Webpack 快速创建一个 React 项目！

Node.js：v22.19.0
React：19.1.1
SuperMap iClient：supermapgis/iclient-leaflet

1、Create React App（传统方式，底层仍使用 Webpack）

1.1、初始化项目

# 创建项目
npx create-react-app my-react-app
# 进入项目目录
cd my-react-app
# 启动项目
npm start

1.2、加载地图

1.2.1、编写代码

App.js：具体加载地图代码

// App.js
import { useEffect, useRef } from 'react';
import L from 'leaflet';
import '@supermapgis/iclient-leaflet';
 
function App() {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);
 
  useEffect(() => {
    if (!mapRef.current) return;
 
    if (mapInstanceRef.current) return;
 
    var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
    
    var map = L.map(mapRef.current, {
      crs: L.CRS.EPSG4326,
      center: [0, 0],
      maxZoom: 18,
      zoom: 1
    });
 
     L.supermap.tiledMapLayer(url).addTo(map);
 
    mapInstanceRef.current = map;
 
    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.remove();
        mapInstanceRef.current = null;
      }
    };
  }, []);
 
  return (
    <div ref={mapRef} style={{margin: '0',height:'100%',position: 'absolute',width:'100%'}}></div>
  );
}
 
export default App;

index.html：引入 iclient-leaflet 相关 css 文件

<!-- index.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />

修改 package.json，禁用 source map

{
  "scripts": {
      "start": "set GENERATE_SOURCEMAP=false&&react-scripts start",
      "build": "set GENERATE_SOURCEMAP=false&&react-scripts build",
      "test": "set GENERATE_SOURCEMAP=false&&react-scripts test",
      "eject": "react-scripts eject"
   }
}

1.2.2、引入 SuperMap iClient for Leaflet

# 安装 supermap-iclient
npm install @supermapgis/iclient-leaflet
# 启动
npm start

2、从零开始创建项目方式

2.1、初始化项目

# 创建项目目录
  mkdir my-react-app
# 进入项目目录
  cd my-react-app
# 初始化 npm 项目
  npm init -y
# 安装 React
  npm install react react-dom
# 安装开发依赖
  npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader

2.2、创建相关目录和文件

# 目录及文件结构
  my-react-app/
  ├── public/              # 静态文件目录
  ├── index.html
  ├── src/                 # 源代码目录
  │   ├── index.js         # 应用入口点
  │   ├── App.js           # 主组件
  │   └── App.css
  ├── package.json
  ├── webpack.config.js    # Webpack 配置
  └── babel.config.js      # Babel 配置

创建 /public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

创建 /src/App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>这是一个手动创建的React应用</p>
    </div>
  );
}
export default App;

创建 /src/App.css

.App {
  text-align: center;
  padding: 20px;
}
h1 {
  color: #333;
}

创建 /src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('root');
  if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
  }
});

创建 /babel.config.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
};

创建 /webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html'),
      filename: 'index.html',
      inject: true, 
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000,
    open: true,
    hot: true,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

修改 package.json 中的 scripts 部分

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
  }
}

2.3、启动项目

# 运行项目，启动
npm start

2.3、加载地图

2.1、编写代码

App.js：具体加载地图代码

// App.js
import { useEffect, useRef } from 'react';
import L from 'leaflet';
import '@supermapgis/iclient-leaflet';
 
function App() {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);
 
  useEffect(() => {
    if (!mapRef.current) return;
 
    if (mapInstanceRef.current) return;
 
    var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
    
    var map = L.map(mapRef.current, {
      crs: L.CRS.EPSG4326,
      center: [0, 0],
      maxZoom: 18,
      zoom: 1
    });
 
     L.supermap.tiledMapLayer(url).addTo(map);
 
    mapInstanceRef.current = map;
 
    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.remove();
        mapInstanceRef.current = null;
      }
    };
  }, []);
 
  return (
    <div ref={mapRef} style={{margin: '0',height:'100%',position: 'absolute',width:'100%'}}></div>
  );
}
 
export default App;

index.html：引入 iclient-leaflet 相关 css 文件

<!-- index.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />

2.2、引入 SuperMap iClient for Leaflet

# 安装 supermap-iclient
npm install @supermapgis/iclient-leaflet
# 运行项目，启动
npm start