如何嵌入Create React App开发的JavaScript？如何在普通Web应用用指定GitHub库？

一、在Create React App项目中嵌入JavaScript代码 #

根据场景不同，有几种常见实现方式：

1. 引入自定义本地JS文件 #

• 若为工具函数、业务逻辑类脚本，直接在React组件中用import导入：

  // 示例：导入src/utils/helper.js中的函数
  import { formatDate } from './utils/helper';
  
  function App() {
    const formattedDate = formatDate(new Date());
    return <div>当前日期：{formattedDate}</div>;
  }
  

• 若为需要全局挂载的脚本（比如依赖window对象的第三方脚本），可将文件放入public目录，然后在public/index.html中用<script>标签引入：

  <!-- public/index.html -->
  <script src="./js/global-script.js"></script>
  

  注意文件路径需相对public根目录。

2. 引入第三方JS库 #

通过npm或yarn安装后，在组件中导入使用：

# 示例：安装lodash库
npm install lodash

import _ from 'lodash';

function App() {
  const sortedArr = _.sortBy([5, 2, 8]);
  return <div>排序后数组：{sortedArr.join(', ')}</div>;
}

二、使用mapbox-gl-draw-scale-rotate-mode库的方法 #

1. 普通Web应用项目 #

• 首先获取库核心代码：从对应仓库复制src目录下的ScaleRotateMode.js文件，放到你的项目目录中（比如js/lib）。
• 确保项目已引入mapbox-gl和@mapbox/mapbox-gl-draw的JS及CSS资源（可从官方渠道获取对应文件或CDN资源）。
• 在HTML中引入ScaleRotateMode.js，并在初始化mapbox-gl-draw时注册该模式：

  <script src="./js/lib/ScaleRotateMode.js"></script>
  <script>
    mapboxgl.accessToken = '你的Mapbox访问令牌';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox官方提供的样式ID',
      center: [-96, 37.8],
      zoom: 3
    });
  
    const draw = new MapboxDraw({
      modes: {
        ...MapboxDraw.modes,
        scale_rotate: ScaleRotateMode
      }
    });
  
    map.addControl(draw);
    // 切换到缩放旋转编辑模式
    draw.changeMode('scale_rotate');
  </script>
  

2. Create React App项目 #

• 先安装依赖：

  npm install mapbox-gl @mapbox/mapbox-gl-draw
  

• 复制ScaleRotateMode.js文件到项目的src/lib目录下。
• 在React组件中导入并集成：

  import React, { useEffect, useRef } from 'react';
  import mapboxgl from 'mapbox-gl';
  import MapboxDraw from '@mapbox/mapbox-gl-draw';
  import ScaleRotateMode from './lib/ScaleRotateMode';
  // 引入样式文件
  import 'mapbox-gl/dist/mapbox-gl.css';
  import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
  
  mapboxgl.accessToken = '你的Mapbox访问令牌';
  
  function MapEditor() {
    const mapContainer = useRef(null);
    const mapInstance = useRef(null);
  
    useEffect(() => {
      if (mapInstance.current) return;
  
      // 初始化地图
      mapInstance.current = new mapboxgl.Map({
        container: mapContainer.current,
        style: 'mapbox官方提供的样式ID',
        center: [-96, 37.8],
        zoom: 3
      });
  
      // 初始化Draw控件并注册自定义模式
      const drawControl = new MapboxDraw({
        modes: {
          ...MapboxDraw.modes,
          scale_rotate: ScaleRotateMode
        }
      });
  
      mapInstance.current.addControl(drawControl);
      // 切换到缩放旋转模式
      drawControl.changeMode('scale_rotate');
  
      // 组件卸载时清理地图实例
      return () => {
        mapInstance.current?.remove();
        mapInstance.current = null;
      };
    }, []);
  
    return <div ref={mapContainer} style={{ width: '100%', height: '500px' }} />;
  }
  
  export default MapEditor;
  

内容的提问来源于stack exchange，提问作者user2490177