如何在React中集成tracking.js？导入报错问题求助

tracking.js是基于浏览器全局环境的非ES模块库，直接import会因模块格式不兼容报错，以下是几种可行的解决方式：

方式一：用useEffect动态加载脚本 #

在组件挂载时动态创建script标签加载库，确保加载完成后再执行业务逻辑：

import { useEffect } from 'react';

function ColorTracker() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = './modules/tracking-min.js';
    script.async = true;

    script.onload = () => {
      // 这里编写你的颜色追踪逻辑，示例：
      const tracker = new tracking.ColorTracker(['red', 'blue']);
      tracker.on('track', event => {
        event.data.forEach(rect => {
          console.log(`颜色位置：x=${rect.x}, y=${rect.y}`);
        });
      });
      tracking.track('#target-image', tracker);
    };

    document.body.appendChild(script);

    // 组件卸载时清理脚本
    return () => document.body.removeChild(script);
  }, []);

  return <img id="target-image" src="./your-image.jpg" alt="待扫描图片" />;
}

export default ColorTracker;

方式二：通过构建工具配置全局模块 #

如果项目使用webpack（包括Create React App），可以通过script-loader将库作为全局脚本加载：

1. 安装依赖：

npm install script-loader --save-dev

2. 在组件中导入：

import 'script-loader!./modules/tracking-min.js';
import { useEffect } from 'react';

function ColorTracker() {
  useEffect(() => {
    // 直接使用全局的tracking变量编写逻辑
    const tracker = new tracking.ColorTracker(['green']);
    tracking.track('#target-image', tracker);
  }, []);

  return <img id="target-image" src="./your-image.jpg" alt="待扫描图片" />;
}

注：如果是Create React App项目，需要用react-app-rewired或craco覆盖默认配置，添加loader规则。

方式三：在HTML中直接引入脚本 #

在public/index.html中添加script标签引入tracking.js，之后在React组件中直接使用全局的tracking变量：

<!-- public/index.html -->
<script src="./modules/tracking-min.js"></script>

组件代码：

import { useEffect } from 'react';

function ColorTracker() {
  useEffect(() => {
    // 直接调用tracking的API
    const tracker = new tracking.ColorTracker(['yellow']);
    tracker.on('track', event => {
      console.log(event.data);
    });
    tracking.track('#target-image', tracker);
  }, []);

  return <img id="target-image" src="./your-image.jpg" alt="待扫描图片" />;
}

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